How to electron
Published in

How to electron

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.

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.dmg
| |--

On Windows -

# When using target — Squirrel$ npm run dist
|-- win
| |-- 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 👇

Buy Akash Nimare a coffee



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store