Building an HMI with electron.js (Part 4).md

Like any professional application it would be nice to have an automated installer to package and distribute our work. Electron framework comes to help for this need. There are some alternatives available but the one we will test is electron-builder.
First of all we need to install electron-builder to our project. Because we’re using npm as the package manager for our project, in a terminal we’ll issue the command

> npm install --save-dev electron-builder

After that we need to add some sections to our package.json confinguration file.

...

  "build": {
    "appId": "com.maurizioattanasi.electron-hmi",
    "mac": {
      "target": "dmg",
      "icon": "src/assets/icons/mac/icon.png"
    },
    "win": {
      "target": "nsis",
      "icon": "src/assets/icons/win/icon.ico"
    },
    "linux": {
      "target": [
        "snap"
      ]
    }
  }

...

and a dist command in the script section to build and distribute the application itself

...

    "electron": "ng build && electron .",
    "electron-aot": "ng build --aot && electron .",
    "dist": "build"

...

As it can be seen in the build section we have three subsections win, mac and linux meaning that, depending on the platform on which we’re developing our app we can have an appropriate installer.

The image above is the output on my macbook resulting in the electron-hmi-0.0.1.dmg installer that can be found in the dist folder of our project.

Have fun, 😉