giovedì 16 agosto 2018

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.
electron-builder-output
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, 😉


giovedì 2 agosto 2018

Building an HMI with electron.js (Part 3)

To achieve the desired result of this series of notes, we will rearrange our project in order to display some dynamic readings, and to do that we will use some of the building blocks introduced in some of my previous notes, as



More details and the code written for this note is available for consulting and comments on my GitHub Repository at the following link and an example of the result is represented in the following video.



In the next and last article we'll see how to make an installer to deploy and distribute our app.

Enjoy, 😉