How to Pack a Electron app

Use electron-packager to create your distribution app packages.

Download the electron-packager

1
2

$ npm install electron-packager -g
$ npm install electron-packager --save-dev

Speed up NPM install in China

1

$ npm install your_package --registry=https://registry.npm.taobao.org

Basic usage

1

$ electron-package ./ --all

Speed up package in China

For the reason that everyone knows, the net speed to AWS is so slow that we cannot wait for it. So we some other options to speed up our progress.

Fortunately, Taobao has a mirror website for electron , we can use this mirror resource to download the package what we need.

1

$ export ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

Minimize the package

Due to the node modules, the package will be so big that you can not easily to distribute them to potential users, so we need to decrease the package size.

Ignore directories

node_modules

Usually, the project has a lot of node dependencies, so the node_module directory should be the largest directory in out normal project. So we definitely should ignore it.

.git

Git repository directory, ignore it too.

.vscode

Visual Studio Code workspace configuration files, we do not need them to build the application we wanted.

Other unnecessary directories and files

Such as .gitignore, README.md, LICENSE.md

Electron

You MUST add electron to devDependencies before packing your application, or it will stretch the application package larger than you think…

Hide your source code

Use the --asar option to hide your source code and resources.

Electron/ASAR README:

*“Asar is a simple extensive archive format, it works like tar that concatenates all files together without compression, while having random access support.”

Conclusion

In order to include all the options above, we may splice the following command:

1

electron-packager . --platform=linux,win32,darwin --arch=ia32,x64 --out=pack/ --overwrite --ignore=\"(.git|.vscode|node_modules|src|.gitignore|README.md|LICENSE.md)\" --asar

Common problems

Cannot load node-notifier

If you include the npm module node-notifier in your Electron application and use the --asar option while packaging, you may find this error after you try to run your packed app.

node-notifier – NPM:

“If packaging your Electron app as an asar, you will find node-notifier will fail to load. Due to the way asar works, you cannot execute a binary from within an asar. As a simple solution, when packaging the app into an asar please make sure you --unpack the vendor folder of node-notifier, so the module still has access to the notification binaries. To do this, you can do so by using the following command:”

1	asar pack . app.asar --unpack "./node_modules/node-notifier/vendor/**"*

So we need to add --asar-unpack-dir=node_modules/node-notifier/vendor/ behind our command.

1

electron-packager . --platform=linux,win32,darwin --arch=ia32,x64 --out=pack/ --overwrite --ignore=\"(.git|.vscode|node_modules|src|.gitignore|README.md|LICENSE.md)\" --asar --asar-unpack-dir=node_modules/node-notifier/vendor/

CNPM

If you use cnpm to install your dependency packages, it may cause error and the pack is much larger after using electron-packager to pack your code to distribution files.

I highly recommend that DO NOT USE CNPM .

To speed up NPM in China, use --registry=https://registry.npm.taobao.org instead.