How to manually package an Electron app for Windows

There are plenty of modules that take care of packaging Electron applications for all supported operating systems, such as electron-packager and electron-builder, however its useful to know what’s going on under the hood, and the only way to adquire that knowledge is to try doing the same thing yourself.

Download Electron

The way Electron packaging works is that the developer downloads a pre-built version of Electron, and customizes the package to include custom code, resources, etc. You can find pre-built Electron packages in GitHub Releases.

For this post, we’re going to use v1.4.4, so we’ll go ahead and download electron-v1.4.4-win32-x64.zip. Lets decompress the ZIP and take a look inside:

$ unzip electron-v1.4.4-win32-x64.zip
$ ls -1

Inject your custom code

If you execute electron.exe before making any modifications, you’ll see the default Electron application, which lives in resources/default_app.asar:

$ ls -1 resources

Electron default application

asar is an open-source custom tar-like archive format developed by Electron to prevent easy access to your code, and to solve problems such as Windows maximum path length limitations. You can install the asar command line tool and unpack the default application source code if you’re curious:

$ npm install -g asar
$ asar extract default_app.asar default_app
$ ls -1 default_app

Electron defines its default search path for application code in lib/browser/init.js:

const searchPaths = ['app', 'app.asar', 'default_app.asar']
for (packagePath of searchPaths) {  
    try {
        packagePath = path.join(process.resourcesPath, packagePath)    
        packageJson = require(path.join(packagePath, 'package.json'))
    } catch (error) {

This means that Electron will attempt to first open any code located at resources/app. If it can’t find any there, it will try resources/app.asar, and if that’s not there neither, it will fallback to resources/default_app.asar.

In order to include our custom application code in there, lets create a directory at resources/app and copy every JavaScript/HTML/CSS file we need in there. Then, we can run asar pack app app.asar to package it up as an asar, and then delete the original app directory.

If you have native dependencies, you can package them correctly by running this command instead (see this guide for more information):

asar pack app app.asar --unpack "{*.dll,*.node}"

We can proceed to delete resources/default_app.asar since we don’t want to include it in our final package.

Brand the Electron package

We’ll do a series of changes to the Electron directory in order to include our application information and other assets.

Now the fun part. Every exe file contains read-only information embedded inside, that describes things as the copyright, the product name, the icon, etc. You can see this information by right-clicking on an exe file (a symbolic link to it won’t work) and opening the “Details” pane. This is what Google Chrome’s executable contains:

Google Chrome exe resources

The Electron team built a very handy tool called rcedit to easily edit this information. You can download the v0.7.0 binary here, and put it somewhere accessible in your %PATH%.

Here’s what we’re going to do with it. We’ll assume you renamed electron.exe to MyApp.exe:

Edit the “File description:”

$ rcedit.exe MyApp.exe --set-version-string "FileDescription" "My app description"

Edit the “Internal name:”

$ rcedit.exe MyApp.exe --set-version-string "InternalName" "My app internal name"

Edit the “Original file name:”

$ rcedit.exe MyApp.exe --set-version-string "OriginalFilename" "MyApp.exe"

Edit the “Product name:”

$ rcedit.exe MyApp.exe --set-version-string "ProductName" "My product name"

Edit the “Company name:”

$ rcedit.exe MyApp.exe --set-version-string "CompanyName" "My company name"

Edit the “Legal Copyright:”

$ rcedit.exe MyApp.exe --set-version-string "LegalCopyright" "My copyright"

Edit the “File version:”

$ rcedit.exe MyApp.exe --set-file-version "My app version"

Edit the “Product version:”

$ rcedit.exe MyApp.exe --set-product-version "My app version"

And finally, we’ll set the icon:

$ rcedit.exe MyApp.exe --set-icon path\to\icon.ico

Release your application to the world!

Now that our Electron package is configured, you can release that to the world, although you’ll probably want to create an installer for it (using something like NSIS), but that’s a subject for another post!