Electron VS. NW.Js VS. CEF

Demonstration

To Illustrate How The Electron Project Work And Can Be Setup, I Created This Brief Step-By-Step Guide For How To Start, Manage And Distribute An Electron Project.

Prerequisite: A functional web application with npm installed.

1. Install Electron: npm install –save electron

    

   1. Create a new main.js file.

      const {app} = require(‘electron’);
      
      app.on(‘ready’, () => {
                mainWindow = new BrowserWindow({ }); //Browser options can be included here.
                mainWindow.loadFile(`index.html`);
      });

2. Point the package.json “main” towards the new main.js file.
   If the previous “main” was the index.html, everthing should be setup now.
   However, if you are using webpack, you will need to point towards the index.html from the dist folder. In order to intergrate both the webpack build and the Electron start into the same startup script, I added an additional npm script in the package.json: “start”: “webpack –mode production && electron . ”

    

3. Run “npm run start” in your terminal and voila! Your web application should now show up as a desktop application.

Additional packing steps:

Now that you got you applicaiton up and running, it would be nice to distribute it. For Electron, this requires one of three possible solutions: Electron-packager, Electron-builder, and Electron-forge. I have only tried electron-builder and electron-packager, and from my perspective, I prefer electron-builder. 

1. To use electron-builder, start by installing it: npm install electron-builder.

    

2. In the package.json file the two following scripts should be added.

   “scripts”: {
             “pack”: “electron-builder –dir”,
             “dist”: “electron-builder”
   }

3. Run “npm run dist”. This should provide you with a distributable file (dependent on the OS), which can install/execute the application.
   Note, that if you are using webpack, you will have to declared files from the dist-folder in the package.json’s build brackets.

   “build”:{
             “files”: [
                       “dist/index.html”
             ],
   }