Electron Setup

17 February 2020

---

Electron is a framework that allows you to create applications using web technologies such as HTML/CSS and javascript. Electron is a Node.js application, Node.js is a cross platform framework for executing javascript on a local machine which is built on Chrome’s V8 javascript engine.

I would recommend reading ‘Writing Your First Electron App’ available in the electron documentation as this tutorial is based from that page.

You can download node.js from the offical site node.js

Getting Started

First create a directory for your new project I have called my ‘ElectronSetup’ we will need a new json file named package.json. This is a javascript object notation that defines the Node.js application information such as application and version. You can either write it yourself, or use the command line:

npm init

using "npm init" will ask you for information required to create the package.json and will place it into the directory which the command was executed from.

{
    "name" : "ElectronSetup",
    "version" : "0.0.1",
    "main" : "index.js",
    "scripts" : {
        "start" : "electron ."
    }
}

We also need a html file that will be used as the application front end and a javascript file named index.js within the project directory. We can leave the index.js file blank for now, we will create an electron application and window later in this file. Next, we need to install electron into the project it's recommended to install it as a development dependency in your Node.js application. With Node.js installed navigate to the project directory using the command line and execute the following command.

npm install --save-dev electron

This will install Electron into the current directory, now we can create the index.js and index.html files which the electron application will use.

Visual Code Setup

There are several methods to debug electron application inside visual code, one method is to use the “Debugger for Chrome” extension and configure the launch.json accordingly. The simpler method is to use the “Debugger for Electron” which essentially configures the chrome debugger for you. If you wish to use the chrome debugger directly, I recommend following the setup guide available here.

Using the Debugger for Electron extension, go to debug then “add Configuration” and select “Electron” this will create the launch.json file for you. You should be able to debug the application using run and debug feature in visual code but first need to create files that are required by electron.

Creating Required Files

Open Visual Code and open the directory where we created the package.json file, in this directory create a index.js file (if you have not ready done so) and create and index.html file. The html file will be the page that displays in the application a simple Hello World document is used in this example.

Inside the index.js we need to create a browser window, load the index.html file as the source and handle the close events. The following javascript code should be placed into the index.js file.

                        
//  first require the electron objects for the application
//  and browserWindow...

const { app, BrowserWindow } = require('electron');

// Create main window object

let mainWindow;

//  Function to create a new electron window
function createWindow() {
mainWindow = new BrowserWindow({
    width: 1208,                    //  Window start width
    height: 720,                    //  Window start height
    webPreferences: {
        nodeIntegration: true
    }
});

//  Set the main window to load the index.html front end page
mainWindow.loadURL(`file://${__dirname}/index.html`);     

//  Create event lister for the window closed event
mainWindow.on('closed', function () {
    mainWindow = null;  
});
}

//
//  Once the Node.js application is ready call the create
//  window function.

app.on('ready', createWindow);

//
//
//

app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});

app.on('active', function () {
if (mainWindow === null)
    createWindow();
});

Executing The Application

Now that electron has been setup, files created, and visual code has been setup you should be able to execute the application using the run feature in visual code. If everything is ok, you will be present with an application window displaying the html page you created.