Hackernoon logoBuild an Easy Desktop app With Electron by@alexoid

Build an Easy Desktop app With Electron

The Electron app is a cross-platform app that can work in any OS. We will use a Vanilla JavaScript project and turn it into an Electron project. The project is created using Node.js and Node.JS.
image
Alexoid Hacker Noon profile picture

Alexoid

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.

Prerequisites:

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.)

Building a Desktop App With Election

First, write the following in your terminal, replacing “

my-app
” with whatever name you like.

image

This command will generate the structure for our Electron app.

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.

image

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.

image

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.

image

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”.

image

Now your app is ready to install on your machine.

Go to the directory “

./out/make/squirrel.[system]
” and run the
setup.exe
file.

And there you have it!

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

image

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.



Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.