Getting Started With Electron – Building a 1-Page App

If you’re an intermediate or advanced javascript programmer, or even if you’re a beginner, chances are, you might have heard of Electron. Electron is an open-source Javascript framework that is being used to develop many applications all over the world.

What Is Electron?

Like I said earlier, Electron is an open-source Javascript framework that is used to develop apps and desktop GUI applications in Javascript and Node.js. Originally developed by GitHub in 2013, Electron has been used to develop many apps and IDE’s, including my personal favorite, Visual Studio Code. Electron was also used to develop Slack and the Atom editor. By combining the Node.js runtime and the Chromium rendering engine, Electron is easy to use and can develop cross-platform apps very easily without too much of a hassle.

Electron Features

• Reusability

With Electron, since the code is web based, the code is completely reusable. This means that we can code once and still be able to convert our website easily into an app.

• Time and Cost

Electron can save a lot of time and money for the fact that you can use the same code for a website and an app. This makes it easier without having to learn multiple new programming languages or hire multiple people.

• Performance

Electron can have excellent performance if developed appropriately, deploying only what you need. Electron can save copious amounts of time in deployment, however it does take up some memory.

These are 3 main features of Electron that make Electron so popular and convenient. Overall, this makes Electron a fantastic development option.

How To Start Using Electron

Electron is relatively easy to understand and is quick to get up and running with. All you need to do is a little bit of Node.js and you can get a 1 page app set up in no time!

First, create a new project folder and call it anything you like. Then, navigate to that directory in your computer’s terminal.

Next, initialize your project with NPM and complete the prompt. If you can’t fill out some fields or don’t know what they mean, accept the defaults.

npm init

After completing the prompt, install Electron as a development dependency.

npm i electron --save-dev

Now that Electron is installed appropriately, it’s time to code the application. Let’s start by adding a start script to run the app.

In your app’s package.json file, add a start script to the scripts object. Remember to include a comma after the test script.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
 },

Now, whenever you’re ready to run your electron application, you can run electron . or npm start to run your project.

Next, create a file called index.js at the root level of your project’s directory. In index.js, we need to require the app and BrowserWindow variables from electron.

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

Next, we’ll need to write the main function that will open our application’s window. We can do this by declaring a function to create a window. Then, we can declare some properties of the window, like the width and height, and tell it to render an HTML page.

var createWindow = () => {
    var window = new BrowserWindow({
        width:800,
        height:600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    window.loadFile('index.html');
}

Now, we need just a couple more functions to activate our app. Here are functions that will draw the window when the app is opened, quit when the application has been quit, and draw a new window if the app is activated.

app.whenReady().then(() => {
    createWindow();
});

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

app.on('activate', () => {
    if(BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
});

Our app is now officially ready. All that’s left to do is to create an HTML page called index.html, and give it whatever content you would like to be in your app. You can also create CSS and Javascript pages to link to your HTML page.

Here is the final code for the boilerplate Electron app that I built.

https://github.com/the-javascript-ninja/Electron_Boilerplate.git