Getting Started with Electron JS – Create Your First App

You have decided to use your web development skills to develop cross-platform desktop apps with Electron JS but don’t know how to start. Getting started may be confusing for beginners. Here is a complete guide on how you can develop your first app with electron.

Requirements

First, you need to make sure you are having a stable version of the node and that it works well on your machine. If you don’t have a node installed you can get it from here. The second thing helpful is your HTML CSS and Javascript knowledge which I assume you have enough.

Creating First App with Electron JS

Now, make a new directory using mkdir command or using GUI. Open your terminal/command prompt and navigate to the first-app directory.

The next step is to create a package.json file and for that, you need to just run npm init command.

It will ask you some basic questions like the package name, author, etc. and you just have to press enter a couple of times and ‘Yes’ at the end. As a result, it will create a package.json file having some basic configurations.

Installing Electron

Till now, we have created a package.json file but we haven’t installed electron. Now, it’s time to install the electron and start working with it. Run npm install electron and it will start installing the package. This may take a few minutes depending on your internet connection.

 

After the command finishes installing electron you will get a new folder node_modules and package-lock.json file. The node_modules folder contains all the modules required for electron js to work and the package-lock.json keeps the version information of these different modules.

Creating main.js File

The package has been installed and now we need to create our main file that will have code to develop the app. Create an index.js file in the root directory and paste the code below.

Explanation of Code

Let’s break down what we wrote. This code will create a basic application with no content at all. The following two lines just import electron and destructure app and browserWindow.

 

After both these lines, you can see a function createMainWindow that is self-explanatory. It creates a new browser window and stores its reference in a constant mainWindow. In the next line, app.on(“ready”,createMainWindow); runs the createMainWindow function when the app is ready.

Running the Electron Application

Our basic electron app is ready but how do we run it? It’s quite simple running an electron application, we just have to add a script in our package.json file. Now, go ahead and add “start” : “electron .”, in the scripts section in your package.json file. Make sure your package.json file looks like the one below.

Now, run the following command.

Here is a screenshot of the app we just developed.

first electron app

We have successfully created our first electron application but we developed it to show nothing to the users. At least there must be a hello world heading. As you already know that with electron you will be using your web designing skills to design the app. So, we’ll make a new HTML file and display content in the app. Create an index.html file and paste the code below. I don’t think any explanation is required for the code below.

This HTML file is a standalone file and it has nothing to do with the index.js file for now. We need to make changes to our index.js file in order to run it. So, add the line below in createMainWindow function.

mainWindow.loadURL(__dirname+”/index.html”);

Make sure your index.js file looks like mine.

Run the application again and you’ll see the “Hello World!” heading in the app.

You can get the code from this Github Repository.

Conclusion

Creating a desktop app with the electron framework is easier than you think. You just need to make sure you have the latest version of node and npm. Create an empty project using the git init command, install the electron package, create an index.js file and everything is done.

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here