In this code story, we’ll explore the following aspects of our solution:<\/p>\n
- \n
- Packaging Electron source into Windows binaries<\/li>\n
- Setting the app in ‘Kiosk’ mode using PowerShell<\/li>\n
- Building a Configurable Windows installer (.MSI<\/em>) using WiX Toolset<\/li>\n
- Cross-platform CI with AppVeyor and Travis<\/li>\n<\/ul>\n
In order to focus on these aspects, we created a sample Electron app<\/a> and iterated on it.<\/p>\n
<\/p>\n
Windows Binaries<\/h2>\n
In perhaps the most straightforward part of our journey, we used the Electron Packager CLI tool to create OS-specific bundles from an Electron app.<\/p>\n
electron-packager .\/src --platform=win32 --arch=x64 --asar --overwrite --out .\/dist<\/pre>\n
Kiosk Mode<\/h2>\n
Windows 10 Enterprise provides multiple ways to run an app in kiosk mode:<\/p>\n
- \n
- Assigned Access<\/a> method, which allows a single Universal Windows Platform (UWP) app to run in kiosk mode.<\/li>\n
- Shell Launcher<\/a> method, which allows a single classic Windows Application (e.g Electron app) to run in kiosk mode.<\/li>\n<\/ul>\n
Intune provides a built-in Configuration Service Provider<\/a> to remote-enable Assigned Access. It is as simple as providing a JSON with domain\/local username and the UWP Application ID in\u00a0 Azure Portal.<\/p>\n
{\"Account\":\"contoso\\\\kioskuser\",\"AUMID\":\"Microsoft.Windows.Contoso_cw5n1h2txyewy!Microsoft.ContosoApp.ContosoApp\"}<\/pre>\nSince Electron is a classic Windows app, we chose Shell Launcher as our way forward.<\/p>\n
Shell Launcher<\/h2>\n
Because Intune does not provide a direct way to remote-enable Shell Launcher, we had to use an elevated PowerShell script. The script takes the local\/domain username as well as the\u00a0full path of the Windows executable (.exe) produced in the previous step as parameters.<\/p>\n
We turned on the Shell Launcher feature in Windows 10 (Programs and Features -> Turn Windows features on or off -> Expand ‘Device Lockdown’ ->\u00a0Select Shell Launcher<\/em>). Below is the code to do the same in PowerShell:<\/p>\n
Enable-WindowsOptionalFeature -online -FeatureName Client-EmbeddedShellLauncher -all -NoRestart<\/pre>\n
Then we created a Shell Launcher Object as provided by Windows Management Instrumentation (WMI).<\/p>\n
$ShellLauncherClass = [wmiclass]\"\\\\localhost\\root\\standardcimv2\\embedded:WESL_UserSetting\"<\/pre>\n
In order to set a custom shell, we had to first find out the Security Identifier (SID) of the Windows username. We wrote a helper function for this:<\/p>\n
function Get-UsernameSID($AccountName) {\r\n $NTUserObject = New-Object System.Security.Principal.NTAccount($AccountName)\r\n $NTUserSID = $NTUserObject.Translate([System.Security.Principal.SecurityIdentifier])\r\n return $NTUserSID.Value\r\n }<\/pre>\nFinally, we set the custom shell for the above SID and full application path:<\/p>\n
# Last parameter is Default Action\r\n# 0 - Restarts the shell application\r\n# 1 - Restarts the device\r\n# 2 - Shuts down the device\r\n$ShellLauncherClass.SetCustomShell($Cashier_SID, $ExeName, ($null), ($null), 0)<\/pre>\n
For debugging purposes we also print modified shell settings:<\/p>\n
$shellSetting = Get-WmiObject -namespace \"root\\standardcimv2\\embedded\" `\r\n -computer \"localhost\" -class WESL_UserSetting | Select-Object Shell, Sid\r\n\r\nWrite-Host $shellSetting<\/pre>\n
If ShellLauncher was successfully updated, the output of this command would be:<\/p>\n
Shell Sid\r\n----- ---\r\nC:\\kiosk-demo-electron-win32-x64\\kiosk-demo-electron.exe S-1-5-21-XXXXXXXXXX-XXXXXXXXX-XXXXXXXXXX-XXXXXXX<\/pre>\n
Windows Auto-Logon<\/h2>\n
To provide a full kiosk experience, we decided to auto-login the kiosk user. For this step, we added another parameter $Password<\/em> to the PowerShell Script and modify Windows Registry.<\/p>\n
$RegPath = \"HKLM:\\SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Winlogon\"\r\nSet-ItemProperty $RegPath \"AutoAdminLogon\" -Value \"1\" -type String\r\nSet-ItemProperty $RegPath \"DefaultUsername\" -Value \"$UserName\" -type String\r\nSet-ItemProperty $RegPath \"DefaultPassword\" -Value \"$Password\" -type String<\/pre>\n
Windows Installer<\/h2>\n
For building Windows Installers for Electron apps, the most popular choice is the Squirrel-based electron-winstaller<\/a> npm module. However, electron-winstaller does not allow custom parameters for the produced installer or executing elevated PowerShell; as a result, we chose to use\u00a0\u00a0WiX Toolset<\/a>\u00a0(specifically, we chose the\u00a0npm module wixtoolset-compiler<\/em><\/a>). When executed normally, the installer prompts for Windows elevation; however, apps distributed with Intune are installed without interruption via the\u00a0SYSTEM<\/em> user, which keeps the elevation prompt silent.<\/p>\n
WiX Toolset<\/h2>\n
Building a Windows installer with WiX is a multi-step process. The first step is to configure it with an XML file (.wxs<\/em>). We have provided a base config file product.wxs\u00a0<\/em>that contains app name, version, author, a unique upgrade code, installer parameters with default values, as well as custom actions that execute our PowerShell script.<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<Wix xmlns=\"http:\/\/schemas.microsoft.com\/wix\/2006\/wi\" xmlns:util=\"http:\/\/schemas.microsoft.com\/wix\/UtilExtension\">\r\n <Product Id=\"*\" Name=\"Kiosk Demo Electron\" Language=\"1033\" Version=\"1.0.0.0\" Manufacturer=\"Syed Hassaan Ahmed\" UpgradeCode=\"a8d48e7b-86a0-4171-8db8-6fb3618dfdc6\">\r\n <Package InstallerVersion=\"500\" Compressed=\"yes\" InstallScope=\"perMachine\" \/>\r\n <MajorUpgrade Schedule=\"afterInstallInitialize\" AllowDowngrades=\"no\" DowngradeErrorMessage=\"ok\" AllowSameVersionUpgrades=\"yes\" \/>\r\n <MediaTemplate EmbedCab=\"yes\" \/>\r\n <!-- Params passed to PowerShell script -->\r\n <Property Id=\"KIOSK_USERNAME\">kioskuser<\/Property>\r\n <Property Id=\"KIOSK_PASSWORD\">kioskpassword<\/Property>\r\n <Property Id=\"EXE_NAME\">kiosk-demo-electron.exe<\/Property>\r\n <Directory Id=\"TARGETDIR\" Name=\"SourceDir\">\r\n <Directory Id=\"ProgramFilesFolder\">\r\n <Directory Id=\"APPLICATIONROOTDIRECTORY\" Name=\"Kiosk Demo Electron\"\/>\r\n <\/Directory>\r\n <\/Directory>\r\n <Feature Id=\"MainApplication\" Title=\"Main Application\" Level=\"1\">\r\n <ComponentRef Id=\"InstallShellLauncher\" \/>\r\n <ComponentGroupRef Id=\"ElectronBinaries\" \/>\r\n <\/Feature>\r\n <!-- Install Shell Launcher -->\r\n <CustomAction Id=\"InstallShellLauncher\"\r\n Property=\"InvokeInstall\"\r\n Value=\""powershell" -NoProfile -NonInteractive -InputFormat None -ExecutionPolicy Bypass -File "[APPLICATIONROOTDIRECTORY]Install-ShellLauncher.ps1" "[KIOSK_USERNAME]" "[KIOSK_PASSWORD]" "[APPLICATIONROOTDIRECTORY][EXE_NAME]"\"\r\n Execute=\"immediate\"\/>\r\n <CustomAction Id=\"InvokeInstall\"\r\n BinaryKey=\"WixCA\"\r\n DllEntry=\"CAQuietExec64\"\r\n Execute=\"deferred\"\r\n Return=\"check\"\r\n Impersonate=\"no\" \/>\r\n <InstallExecuteSequence>\r\n <Custom Action=\"InstallShellLauncher\" After=\"CostFinalize\">NOT Installed<\/Custom>\r\n <Custom Action=\"InvokeInstall\" After=\"InstallFiles\">NOT Installed<\/Custom>\r\n <\/InstallExecuteSequence>\r\n <\/Product>\r\n<\/Wix><\/pre>\n
Then we execute WiX steps in this order:<\/p>\n
1) Heat<\/h3>\n
Heat<\/a> is a binary harvester that scans through folders or .NET<\/em> solutions (.sln<\/em>) for Windows binaries and generates an XML output with a\u00a0list of files.<\/p>\n
heat.exe dir \"<PATH_TO_ELECTRON_BINARIES>\" -v -ag -cg ElectronBinaries -var var.SourceDir -dr APPLICATIONROOTDIRECTORY -srd -suid -sfrag -sreg -out .\/dist\/heat.wxs<\/pre>\n
Here is a part of the generated heat.wxs<\/em> output:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<Wix xmlns=\"http:\/\/schemas.microsoft.com\/wix\/2006\/wi\">\r\n <Fragment>\r\n <DirectoryRef Id=\"APPLICATIONROOTDIRECTORY\">\r\n <Component Id=\"kiosk_demo_electron.exe\" Guid=\"*\">\r\n <File Id=\"kiosk_demo_electron.exe\" KeyPath=\"yes\" Source=\"$(var.SourceDir)\\kiosk-demo-electron.exe\" \/>\r\n <\/Component>\r\n <Component Id=\"node.dll\" Guid=\"*\">\r\n <File Id=\"node.dll\" KeyPath=\"yes\" Source=\"$(var.SourceDir)\\node.dll\" \/>\r\n <\/Component>\r\n <Component>...Other Chromium binaries...<\/Component>\r\n <\/DirectoryRef>\r\n <\/Fragment>\r\n <Fragment>\r\n <ComponentGroup Id=\"ElectronBinaries\">\r\n <ComponentRef Id=\"kiosk_demo_electron.exe\" \/>\r\n <ComponentRef Id=\"node.dll\" \/>\r\n <ComponentRef Id=\"...Other Chromium binaries...\" \/>\r\n <\/ComponentGroup>\r\n <\/Fragment>\r\n<\/Wix><\/pre>\n
2) Candle<\/h3>\n
Candle<\/a>\u00a0pre-processes\u00a0.wxs<\/em> files and generates compiled .wixobj<\/em> files. We passed the above .wxs<\/em> files to Candle.<\/p>\n
candle.exe -v -ext WixUtilExtension -dSourceDir=\"<PATH_TO_ELECTRON_BINARIES>\" .\/tools\/product.wxs .\/dist\/heat.wxs -out .\/dist\/<\/pre>\n
3) Light<\/h3>\n
The Light<\/a> tool processes the previously mentioned\u00a0.wixobj<\/em> files and produces the final installer (.MSI<\/em>).<\/p>\n
light.exe -v -ext WixUtilExtension .\/dist\/product.wixobj .\/dist\/heat.wixobj -out .\/dist\/KioskDemoElectron.msi<\/pre>\n
The previous WiX steps were wrapped inside npm scripts. Here is how the package.json\u00a0<\/em>looks:<\/p>\n
\"config\": {\r\n \"binaries\": \".\/dist\/kiosk-demo-electron-win32-x64\"\r\n },\r\n\"scripts\": {\r\n \"clean\": \"rimraf .\/dist\",\r\n \"pack\": \"cross-env DEBUG=electron-packager electron-packager .\/src --platform=win32 --arch=x64 --asar --overwrite --out .\/dist\",\r\n \"heat\": \"wixtoolset-compiler heat --args=\\\"dir %npm_package_config_binaries% -v -ag -cg ElectronBinaries -var var.SourceDir -dr APPLICATIONROOTDIRECTORY -srd -suid -sfrag -sreg -out .\/dist\/heat.wxs\\\"\",\r\n \"copyScripts\": \"cross-conf-env copyfiles -f .\/tools\/scripts\/*.* npm_package_config_binaries\",\r\n \"candle\": \"wixtoolset-compiler candle --args=\\\"-v -ext WixUtilExtension -dSourceDir=%npm_package_config_binaries% .\/tools\/product.wxs .\/dist\/heat.wxs -out .\/dist\/\\\"\",\r\n \"light\": \"wixtoolset-compiler light --args=\\\"-v -ext WixUtilExtension .\/dist\/product.wixobj .\/dist\/heat.wixobj -out .\/dist\/KioskDemoElectron.msi\\\"\",\r\n \"build\": \"run-s heat copyScripts candle light\",\r\n \"dist\": \"run-s clean pack build\"\r\n },\r\n\"devDependencies\": {\r\n \"copyfiles\": \"^1.2.0\",\r\n \"cross-conf-env\": \"^1.1.2\",\r\n \"cross-env\": \"^5.0.5\",\r\n \"electron\": \"^1.7.8\",\r\n \"electron-packager\": \"^9.1.0\",\r\n \"npm-run-all\": \"^4.1.1\",\r\n \"rimraf\": \"^2.6.2\",\r\n \"wixtoolset-compiler\": \"^1.0.3\"\r\n }<\/pre>\nNext, generate the installer in the\u00a0\/dist<\/em> folder:<\/p>\n
npm run dist<\/pre>\n
The installer can simply be invoked by:<\/p>\n
KioskDemoElectron.msi KIOSK_USERNAME=<KIOSK_USERNAME> KIOSK_PASSWORD=<KIOSK_PASSWORD><\/pre>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/cse\/wp-content\/uploads\/sites\/55\/2018\/04\/Featured.png\")
<\/p>\n ![\"Image](\"https:\/\/devblogs.microsoft.com\/cse\/wp-content\/uploads\/sites\/55\/2018\/04\/intune-1024x511-1.png\")
Distributing the generated .msi with Intune in the Azure Portal<\/figcaption><\/figure><\/p>\nContinuous Integration<\/h2>\n
AppVeyor<\/h2>\n
We wanted to make sure we had a way to verify that changes in Electron app or PowerShell script continue to produce an installer that correctly sets the app in kiosk mode, so we used AppVeyor<\/a> CI to build and execute the installer on AppVeyor’s Windows build agent as well as produce an installation log file.<\/p>\n
Here is the appveyor.yml<\/em>:<\/p>\n
image: Visual Studio 2017\r\ninstall:\r\n - ps: Install-Product node 9\r\n - npm install npm@latest -g\r\n - npm install\r\nbuild_script:\r\n - npm run dist\r\n - cd dist\r\n - msiexec \/i \"KioskDemoElectron.msi\" \/l*v \"install.log\" KIOSK_USERNAME=%username%\r\nartifacts:\r\n - path: .\\dist\\*.msi\r\n - path: .\\dist\\*.log<\/pre>\n
Travis CI<\/h2>\n
Building Windows installers on a Linux environment is uncommon, and we ran into a few challenges.<\/p>\n
- \n
- WiX Toolset is a .NET application.\u00a0 We\u00a0used\u00a0Winetricks<\/a> to install .NET Framework 4.0.<\/li>\n
- If the full path of any of the electron-packager output files were longer than 128 chars, we ran into\u00a0error LGHT0103 : The system cannot find the file<\/a>.<\/li>\n
- Light tool has a known issue with MSI validation on Wine<\/a> so it had to be turned off with -sval<\/em> flag.<\/li>\n<\/ul>\n
In order to isolate Wine and Winetricks setup, we used an existing Linux Docker image<\/a>\u00a0which contained WiX Toolset, Wine and Node.js, to create our app’s Docker image.<\/p>\n
FROM syedhassaanahmed\/wix-node\r\nRUN mkdir \/home\/wix\/src\r\nWORKDIR \/home\/wix\/src\r\nCOPY . .\r\nRUN npm install\r\nRUN npm run dist:wine<\/pre>\n
We then added these Docker commands to npm scripts which build the image, create the container and copy the artifacts from the container to host machine.<\/p>\n
{\r\n \"docker:build\": \"cross-conf-env docker build -t npm_package_name .\",\r\n \"docker:create\": \"cross-conf-env docker create --name npm_package_name npm_package_name\",\r\n \"docker:copy\": \"cross-conf-env docker cp npm_package_name:\/home\/wix\/src\/dist\/ .\/dist\",\r\n \"docker:remove\": \"cross-conf-env docker rm -f npm_package_name\",\r\n \"dist:docker\": \"run-s docker:build docker:create clean docker:copy docker:remove\"\r\n}<\/pre>\nHere is the final Travis CI configuration:<\/p>\n
language: node_js\r\nnode_js:\r\n - \"9\"\r\nservices:\r\n - docker\r\nscript:\r\n - npm run dist:docker\r\nnotifications:\r\n email: false<\/pre>\n
Conclusion<\/h2>\n
Through our collaboration with the customer, we were able to build a simple Electron-based app that we could deploy to a broad range of devices using Microsoft Intune.\u00a0 While we used a simple Electron app here, you can easily use the scripts and code that we developed here for other projects where you want to manage and customize the deployment of Electron apps.<\/p>\n
Resources<\/h2>\n
- \n
- Sample Project repo<\/a><\/li>\n
- WiX Toolset Docker repo<\/a><\/li>\n<\/ul>\n
You can reach out to us with feedback and questions in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"
We developed an Electron-based app using Microsoft Intune cloud service for management and distribution across a broad range of devices.<\/p>\n","protected":false},"author":21412,"featured_media":10771,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15,16,17],"tags":[49,156,165,214,243,264,277,295,362,387,390,391],"class_list":["post-5517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-containers","category-devops","category-frameworks","tag-appveyor","tag-docker","tag-electron","tag-intune","tag-mdm","tag-msi","tag-npm","tag-powershell","tag-travis-ci","tag-windows-10-iot-enterprise","tag-windows-registry","tag-wix-toolset"],"acf":[],"blog_post_summary":"
We developed an Electron-based app using Microsoft Intune cloud service for management and distribution across a broad range of devices.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts\/5517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/users\/21412"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/comments?post=5517"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts\/5517\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/media\/10771"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/media?parent=5517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/categories?post=5517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/tags?post=5517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- WiX Toolset Docker repo<\/a><\/li>\n<\/ul>\n
- If the full path of any of the electron-packager output files were longer than 128 chars, we ran into\u00a0error LGHT0103 : The system cannot find the file<\/a>.<\/li>\n
- Shell Launcher<\/a> method, which allows a single classic Windows Application (e.g Electron app) to run in kiosk mode.<\/li>\n<\/ul>\n
- Cross-platform CI with AppVeyor and Travis<\/li>\n<\/ul>\n