{"id":2145,"date":"2016-05-08T18:05:12","date_gmt":"2016-05-09T01:05:12","guid":{"rendered":"https:\/\/www.microsoft.com\/reallifecode\/index.php\/2016\/05\/08\/compiling-electron-apps-for-the-windows-store\/"},"modified":"2020-03-20T12:40:42","modified_gmt":"2020-03-20T19:40:42","slug":"compiling-electron-apps-for-the-windows-store","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/ise\/compiling-electron-apps-for-the-windows-store\/","title":{"rendered":"Compiling Electron Apps for the Windows Store"},"content":{"rendered":"<p>Electron apps are a powerful cross-platform solution for developers: Combining Chromium, Node.js, and a thick layer of APIs to integrate with the operating system, Electron enables developers to build Desktop apps using JavaScript and Node modules. Electron applications run on Windows, Mac OS X, and Linux &#8211; but they are not able to take advantage of the more recent innovations in the Windows application world, where the good old win32 exectuable got a new sibling: The Universial Windows Platform (UWP). The <code class=\"highlighter-rouge\">.appx<\/code> format does not only enable a number of new powerful APIs like Cortana or Push Notifications, but through the Windows Store, also simplifies installation and updating.<\/p>\n<p>We developed a tool that compiles Electron apps into <code class=\"highlighter-rouge\">.appx<\/code> packages, enabling developers to use some of the goodies found in the new application model. This post explains in detail how to use the new tool &#8211; and what the capabilities and limitations of an Electron AppX package are.<\/p>\n<h2 id=\"background-and-requirements\">Background and Requirements<\/h2>\n<p>Before we actually start converting an Electron app, let\u2019s take a quick look at what is happening under the hood: Windows 10 \u201cAnniversary Update\u201d is able to run win32 <code class=\"highlighter-rouge\">.exe<\/code> binaries by launching them together with a virtualized filesystem and registry. Both are created during compilation by running app and installer inside a Windows Container, allowing Windows to identify exactly which modifications to the operating system are done during installation. Pairing the executable with a virtual filesystem and a virtual registry allows Windows to enable one-click installation and uninstallation.<\/p>\n<p>In addition, the exe is launched inside the AppX model &#8211; meaning that it can use many of the APIs available to the Universial Windows Platform. To gain even more capabilities, an Electron app can pair up with an invisible UWP process launched together with the Electron <code class=\"highlighter-rouge\">exe<\/code> inside the appx model. That UWP process can function as a sidekick to the Electron <code class=\"highlighter-rouge\">exe<\/code>, running tasks in the background, receiving push notifications, or communicating with other applications.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/cse\/wp-content\/uploads\/sites\/55\/2020\/03\/2016-05-Electron-Windows-Store-diagram.png\" alt=\"Diagram\" \/><\/p>\n<p>To compile any existing Electron app, ensure that you have the following requirements:<\/p>\n<ul>\n<li>Windows 10 Anniversary Update &#8211; Enterprise Edition (This is build 14316 and up &#8211; as of May 2016, it\u2019s part of the latest Windows Insiders Preview)<\/li>\n<li>Windows 10 SDK from <a href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/downloads\/windows-10-sdk\">here<\/a><\/li>\n<li>Node.js v4 or above (to check, run <code class=\"highlighter-rouge\">node -v<\/code>)<\/li>\n<\/ul>\n<p>Then, install the <code class=\"highlighter-rouge\">electron-windows-store<\/code> CLI:<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>npm install -g electron-windows-store\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"setup-and-preparation\">Setup and Preparation<\/h2>\n<p>Before running the CLI for the first time, you will have to setup the \u201cWindows Desktop App Converter\u201d. This will take a few minutes, but don\u2019t worry &#8211; you only have to do this once. Download the Desktop App Converter from <a href=\"https:\/\/aka.ms\/converter\">here<\/a>. You will receive two files: <code class=\"highlighter-rouge\">DesktopAppConverter.zip<\/code> and <code class=\"highlighter-rouge\">BaseImage-14316.wim<\/code>.<\/p>\n<ol>\n<li>Unzip <code class=\"highlighter-rouge\">DesktopAppConverter.zip<\/code>. From an elevated PowerShell (opened with \u201crun as Administrator\u201d, ensure that your systems execution policy allows us you to run all the required commands by calling <code class=\"highlighter-rouge\">Set-ExecutionPolicy bypass<\/code>.<\/li>\n<li>Then, run the installation of the Desktop App Converter, passing in the location of the Windows base Image (downloaded as <code class=\"highlighter-rouge\">BaseImage-14316.wim<\/code>), by calling <code class=\"highlighter-rouge\">.DesktopAppConverter.ps1 -Setup -BaseImage .BaseImage-14316.wim<\/code>.<\/li>\n<li>If running the above command prompts you for a reboot, please restart your machine and run the above command again after a successful restart.<\/li>\n<\/ol>\n<p>Once installation succeeded, you can move on to compiling your Electron app.<\/p>\n<h2 id=\"package-your-electron-application\">Package Your Electron Application<\/h2>\n<p>Package the application using <a href=\"https:\/\/github.com\/electron-userland\/electron-packager\">electron-packager<\/a> (or a similar tool). Make sure to remove <code class=\"highlighter-rouge\">node_modules<\/code> that you don\u2019t need in your final application, since any module you don\u2019t actually need will just increase your application\u2019s size.<\/p>\n<p>The output should look roughly like this:<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>\u251c\u2500\u2500 Ghost.exe\r\n\u251c\u2500\u2500 LICENSE\r\n\u251c\u2500\u2500 content_resources_200_percent.pak\r\n\u251c\u2500\u2500 content_shell.pak\r\n\u251c\u2500\u2500 d3dcompiler_47.dll\r\n\u251c\u2500\u2500 ffmpeg.dll\r\n\u251c\u2500\u2500 icudtl.dat\r\n\u251c\u2500\u2500 libEGL.dll\r\n\u251c\u2500\u2500 libGLESv2.dll\r\n\u251c\u2500\u2500 locales\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 am.pak\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 ar.pak\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 [...]\r\n\u251c\u2500\u2500 msvcp120.dll\r\n\u251c\u2500\u2500 msvcr120.dll\r\n\u251c\u2500\u2500 natives_blob.bin\r\n\u251c\u2500\u2500 node.dll\r\n\u251c\u2500\u2500 pdf.dll\r\n\u251c\u2500\u2500 resources\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 app\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 atom.asar\r\n\u251c\u2500\u2500 snapshot_blob.bin\r\n\u251c\u2500\u2500 squirrel.exe\r\n\u251c\u2500\u2500 ui_resources_200_percent.pak\r\n\u251c\u2500\u2500 vccorlib120.dll\r\n\u2514\u2500\u2500 xinput1_3.dll\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"running-the-command-line-tool\">Running the Command Line Tool<\/h2>\n<p>From an elevated PowerShell (run it \u201cas Administrator\u201d), run <code class=\"highlighter-rouge\">electron-windows-store<\/code> with the required parameters, passing both the input and output directories, the app\u2019s name and version, and confirmation that <code class=\"highlighter-rouge\">node_modules<\/code> should be flattened. If you don\u2019t pass these parameters, the tool will simply ask you for them.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>electron-windows-store `\r\n    --input-directory C:myelectronapp `\r\n    --output-directory C:outputmyelectronapp `\r\n    --flatten true `\r\n    --package-version 1.0.0.0 `\r\n    --package-name myelectronapp\r\n    --container-virtualization\r\n<\/code><\/pre>\n<\/div>\n<p>The first time you run this tool, you will be required to enter some settings. It will ask you only once and store your answers in your profile folder in a <code class=\"highlighter-rouge\">.electron-windows-store<\/code> file. You can also provide these values as a parameter when running the CLI.<\/p>\n<p>To fine-tune exactly how the tool runs, specify any of the following parameters:<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>These are all options for the CLI:\r\n\r\n```\r\n  -h, --help                                 output usage information\r\n  -V, --version                              output the version number\r\n  -c, --container-virtualization             Create package using Windows Container virtualization\r\n  -b, --windows-build                        Display Windows Build information\r\n  -i, --input-directory &lt;path&gt;               Directory containing your application\r\n  -o, --output-directory &lt;path&gt;              Output directory for the appx\r\n  -f, --flatten &lt;true|false&gt;                 Flatten Node modules without warning\r\n  -p, --package-version &lt;version&gt;            Version of the app package\r\n  -n, --package-name &lt;name&gt;                  Name of the app package\r\n      --package-display-name &lt;displayName&gt;   Dispay name of the package\r\n      --package-description &lt;description&gt;    Description of the package\r\n  -e, --package-executable &lt;executablePath&gt;  Path to the package executable\r\n  -a, --assets &lt;assetsPath&gt;                  Path to the visual assets for the appx\r\n  -m, --manifest &lt;manifestPath&gt;              Path to a manifest, if you want to be overwritten\r\n  -d, --deploy &lt;true|false&gt;                  Should the app be deployed after creation?\r\n```\r\n<\/code><\/pre>\n<\/div>\n<p>Once executed, the tool goes to work: It accepts your Electron app as an input, flattening the <code class=\"highlighter-rouge\">node_modules<\/code>. Then, it archives your application as <code class=\"highlighter-rouge\">app.zip<\/code>. Using an installer and a Windows Container, the tool creates an \u201cexpanded\u201d AppX package &#8211; including the Windows Application Manifest (<code class=\"highlighter-rouge\">AppXManifest.xml<\/code>) as well as the virtual file system and the virtual registry inside your output folder.<\/p>\n<p>Once we have the expanded AppX files, the tool uses the Windows App Packager (<code class=\"highlighter-rouge\">MakeAppx.exe<\/code>) to create a single-file AppX package from those files on disk. Finally, the tool can be used to create a trusted certificate on your computer to sign the new AppX pacakge. With the signed AppX package, the CLI can also automatically install the package on your machine.<\/p>\n<h2 id=\"using-the-appx-package\">Using the AppX Package<\/h2>\n<p>Congratulations, you have now compiled your Electron application as an AppX! Since the Windows Anniversary Update (codenamed Windows Redstone) has not been released to consumers yet, you won\u2019t be able to release your app to the Windows Store until later this year &#8211; but you can already use the <code class=\"highlighter-rouge\">Add-AppxPackage<\/code> <a href=\"https:\/\/technet.microsoft.com\/en-us\/library\/hh856048.aspx\">PowerShell Cmdlet to install it on machines<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using a new tool built by Microsoft, developers can turn their Electron apps into Windows Store-ready AppX packages.<\/p>\n","protected":false},"author":21345,"featured_media":11139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17],"tags":[165,220,275,370],"class_list":["post-2145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frameworks","tag-electron","tag-javascript","tag-node","tag-universal-windows-platform-uwp"],"acf":[],"blog_post_summary":"<p>Using a new tool built by Microsoft, developers can turn their Electron apps into Windows Store-ready AppX packages.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts\/2145","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\/21345"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/comments?post=2145"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts\/2145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/media\/11139"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/media?parent=2145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/categories?post=2145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/tags?post=2145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}