Build an Easy Desktop app With Electron

Creating your desktop app can be easy with Electron. You can build cross-platform applications that work in any OS.

In this tutorial, we will use a Vanilla JavaScript project and turn it into an Electron app.

If you know Vanilla JavaScript, follow me through this tutorial.

1. Have Node.js installed on your computer.

2. Have a previous project sample in Vanilla JavaScript (todo-list, notes-app, tic-tac-toe, etc.)

First, write the following in your terminal, replacing “

my-app

” with whatever name you like.

Then, type

cd

and the

name of your project

.

In the src folder, you will find an

index.html

,

style.css

, and

index.js 

files.

The file called

index.js

contains the setup of “

my-app

”. We have to make some changes to it.

This configuration allows Electron to work with

Node.js

and with different modules.

Now you can copy your files to the

src

folder.

Remember that the main HTML file has to be named i

ndex.html 

because the

mainWindow

function will use that file to start the app.

You can also change the name of the starting file instead of “

index.html

”. Remember that you can replace the HTML and CSS file but do not change the

index.js

file. That file is the core of our application.

Now with your project ready to run, type “

npm start

”.

You have to see a chromium window pop-up with your application running.

Before running the

build

command check that all is working.

If you want to make some adjustments to your app now is the time. Next, type “

npm run make

” in your terminal.

When this process has finished you will see a new folder called “out”.

Now your app is ready to install on your machine.

Go to the directory “

./out/make/squirrel.[system]

” and run the

setup.exe

file.

Click on your desktop window and access your brand new desktop app!

Congratulations, you’ve now built your quick and easy desktop app using Electron! How cool is that?

I hope you have found this article useful. Thanks for reading it.