Building an HMI with electron.js (Part 2)

Let’s tak a step ahead in our journey toward the target of this notes that is, how to build an HMI runnable on different platforms using some Web Technologies.

Let’ add some TypeScript

The first step is to rearrange our project in order to introduce TypeScript.

• First thing first, we’ll create a new folder named src wich will contain our TypeScript source files;
• Then let’s rename our JavaScript files changing their extensions from js to ts, and move them from the root folder to the src folder. The content of the files will not change much, after all TypeScript is a superset of JavaScript. Infact the only thing that we’ll change are the const and let declarators that, in the spirit of the new idioma will become var;
• Another change in the main.ts file is the relative path of the index.html file that will change into

'../index.html'

• A major change is the introduction of the tsconfig.json file in the root of our project which specifies the root files and the compiler options required to build the project.

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "noImplicitAny": false,
      "sourceMap": true,
      "outDir": "dist",
      "baseUrl": ".",
      "paths": {
        "*": [
          "node_modules/*"
        ]
      }
    },
    "include": [
      "src/**/*"
    ]
  }

• Finally, we have to add some changes to our packag.json file, and in particular, we’ll add a build script that will invoke our TypeScript compiler tsc

"build": "tsc",

and then we need to modify a little our start script as follows:

"start": "npm run build && electron ./dist/main.js"

so that, in a few words, it will initially compile our TypeScript project, and then launch the application passing to the electron command the resulting main.js file.

The code written for this note is available for consulting and comments on my GitHub Repository at the following link.

For now that’s all folks.

Enjoy, 😉