Akash Nimare
Dec 30, 2016 · 2 min read

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 a 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 structure as well as single package.json. We’ll be using 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.

(Note - This post was originally posted here — https://howtoelectron.app/)

How to electron

How to do X in electron

Thanks to develar

Akash Nimare

Written by

A messy web developer who likes to write about web, life and motivation. Previously @hackerrank. Currently with @zulip. Open source all the way ❤

How to electron

How to do X in electron

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade