A complete guide to packaging your Electron app

Packaging an electron app simply means creating a desktop installer (dmg, exe, deb, etc). Now if you decide to go around manually packaging your app, you’re gonna have a bad time.

Luckily there are modules, especially the two mentioned below which make the task easier.

electron-builder

electron-packager

We’ll be using electron-builder since it has built-in support for Code Signing/Auto Update etc.

Configure your app to use electron-builder :

• Create a directory build in the root of the project and save a background.png (macOS DMG background), icon.icns (macOS app icon) and icon.ico (Windows app icon) into it. The Linux icon set will be generated automatically based on the macOS. Ex. zulip-electron/build
• Add electron-builder to your app devDependencies by running:

npm install electron-builder --save-dev

• In electron-builder you could use two package.json structures as well as single package.json. We’ll be using a single package.json structure since it’s easier to maintain.

Sample One package.json

On windows build you can also use NSIS target which is the default one and recommended by electron-builder.

"win": {
   "target": "NSIS"
}

That’s it. You’ve successfully configured electron-builder. Now let’s build the installers. To package your app into an installer use command:

npm run dist

It will create an installer in ./dist folder. By default build command will only generate the installer for current platform and current arch. For an ex. running it on OSX will create —

$ npm run dist
    |-- mac
    |   |-- appname-version-mac.zip
    |   |-- appname-version.dmg
    |   |-- appname.app

On Windows -

# When using target — Squirrel
$ npm run dist
    |-- win
    |   |-- REALESES
    |   |-- appnameSetupversion.exe
    |   |-- appname-version-full.nupkg
    |-- win-unpacked
# When using target — NSIS
$ npm run dist
    |-- win
    |   |-- appnameSetupversion.exe
    |-- win-unpacked

On Linux -

$ npm run dist
    |-- appname-version.AppImage
    |-- appname-version.deb
    |-- linux-unpacked

electron-builder is highly configurable. For complete usage check out its wiki. zulip-electron (two package.json) and onshape-desktop-shell (one package.json) are some real-world projects that use electron-builder for their packaging.

If you have enjoyed this article and would like to buy me a coffee ☕️ follow this 👇