Building desktop applications with Electron - electron-builder

This tutorial assumes you know how to install and setup electron-quick-start project. You can find the tutorial here.

In this tutorial, we will take a look at using electron-builder to package and build a ready for distribution Electron app. Since I have a Windows machine, I will show you how to build NSIS installer. NSIS (Nullsoft Scriptable Install System) is a professional open source system to create Windows installers.

Begin by installing electron-builder module as a dev dependency.

npm install electron-builder --save-dev

Now, let’s navigate to our package.json, because we need to add some build configuration to tell electron-builder how to build our application. Specify the build configuration by adding new build node in the .json file and specify the appId (in our case, I will write com.jamzi.quickstart) and the platform for which we want to build (in our case, this is a win platform and a type target installer will be a type of NSIS. Also, we will add an icon, so let’s add a property icon and point it to the build/icon.ico

 "build": {
   "appId": "com.jamzi.quickstart",
   "win": {
     "target": "nsis",
     "icon": "build/icon.ico"
   }
}

Next, we will add one npm script to package and build our application. The script name will be dist and it will run the electron-builder build command.

 "scripts": {
   "start": "electron .",
   "dist": "build"
 },

Earlier, we mentioned that we want to add an icon to our app and installer. You can add files like background images and app icons in the build directory in the project root. Let’s create this build directory and save our icon inside (Windows app icon has to be icon.ico format).

Now, to run our NSIS Windows installer, navigate to command line and type:

npm run dist