How to setup Electron.js for desktop application development, JavaScript/Node.js

The go-to languages for building desktop applications for most people is the C, C++ and C# language.

Other alternatives include Python, Java and Perl but not many people pay attention to JavaScript as a suitable language for web application development.

Fortunately for we JavaScript eggheads, the vast array of JS frameworks available now has made it possible for use to be able to use JS for virtually anything, including Desktop application development.

When it comes to using JavaScript for desktop application development, the tool for that is Electron.js.

Electron.js is a JavaScript framework that can be used in conjunction with HTML and CSS to build desktop apps.

In this tutorial we will learn how to set up a desktop application using Electron.js

Creating a Electron.js app

First we need to create a project directory and open the directory in Command Prompt.

We then run this command to generate a package.json file which will specify all our dependencies

npm init

In your package.json we have to explicitly specify that the project should be run as an electron based project instead of a Node.js project outrightly.

In the scripts objects add a new line to make the package.json file look like this

That way, whenever we run npm start command from the console the project will be started as an electron project.

Next, we have to install Electron.js itself and to do that we will run the following command in the console

npm install electron

After making sure that electron has been installed, the next thing to do is to create a index.js file and add the following code in it

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

function  createWindow () {
    const  win = new  BrowserWindow({
        width:  800,
        height:  600,
        webPreferences: {
            nodeIntegration:  true
        }
    })

    win.loadFile('public/index.html')
}

app.whenReady().then(createWindow)

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

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

The function createWindow() will create a new browser window that will display the contain the contents of the app.

createWindow() helps us to define certain characteristics of the app such as the default width and height of the view and also the default file to be loaded for display when the app window opens.

win.loadFile('public/index.html')

The code above indicates that when the browser window opens, the file to load is the index.html file in the public directory.

Now we will create a new folder public in the root of the project and in the new folder add a file index.html.

You can add any starter code in index.html for testing, mine is

<p>Welcome to Hive Electron Tutorial</p>

If we run npm start in the project directory we will see a new window created like the one below

You can now go on and start building whatever you have in mind, you can integrate Electron with any frontend framework such as Angular/React.

You can also add backend packages such as Express.js/Hapi.js.

Happy building.