Build an Electron App with node.js .

By | 09/08/2018

In this tutorial I will show you how to build an application with electron and node.js.
Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS and you can build cross-platform desktop applications free.
The official website can be found here.
Download node.js and install on your operating system.
I have used Windows 8.1 and the version number 10.8.0 for node.js.
Let’s see files from the folder nodejs where is the node.js install:

Create a folder for your electron application into this folder:

We can use the npm tool to manage packages that are local dependencies of a particular project.
Use the next command to init the npm tool:

We need to install the electron with this command:

Let’s see the files from the folder electronapp:

Open the package.json file and change the line row with test with start, see:

When I used the command npm init I set this file named mainapp.js , see the entry point: (index.js) mainapp.js and the package.json file.
We have to create the following files and complete them with source code: mainapp.html and mainapp.js.
The mainapp.html is the HTML5 file with the content of the application, see :

The mainapp.js will create the electron application, see:

This application use loadURL to show the HTML5 file.
You can see more examples on official website or looking for examples on the internet.
Depends on the basic structure of the application.
If you are not interested in the URL then you can use:

Use the next command to start the project:

This is the output result of this source code:

The next step will add a menu, to see how is working.
See the source code and find the source code I change it:

The result will remove the old menu and will add just the my menu item.
This menu does nothing, it’s just to see the changes in the source code.
Examples can follow, but this is just a tutorial and I should not overload it with too much information.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.