An HTML5 desktop app with electron4 min read

Electron let’s you build cross platform desktop apps using HTML5 and javascript. Let’s make a  demo desktop app with electron.

If you haven’t  heard of electron from GitHub, you should go through this Build cross platform desktop apps with JavaScript, HTML, and CSS before continuing.

Without wasting our time let’s get started with the app.

Prerequisites

The app

We shall call our app Dapp – Demo App.

Let’s also create a project folder named dapp and open command window inside the folder.

All the commands have to be run inside this folder.

The first command would be

Input the required information and our package.json file would be created.

Now we have to install electron which is available as an npm package.

We are installing it as developer dependency.

The package.json file has to be modified to run electron at start

Add a start script as shown above.

We have to create a file called index.js, as we have provided it in the package file with the key main.

Let’s just copy the index.js file provided in the electron website.

The index.js file would load an HTML file called index.html in our main window.

So let’s create one and save it in the same directory.

Now our app is ready to run. Try it out with this command

Please note that the command window should be open inside the project folder throughout this tutorial.

Now that our app is ready, the only thing left is to package it.

Packaging electron applications

For packaging we use electron-builder.

First install electron-builder through npm.

The documentation for electron-builder tells us to modify the package.json file to add the pack and dist scripts.

A unique app id is also required for the build.

So let’s the modify the file.

And finally run

Comment below if something went wrong.

✌️