Getting Started with Electron JS – Create Your First App

Create your first app with electron
Create your first app with electron

So, 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 starting 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 node and it works in your machine. If you don’t have 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 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 to work and the package-lock.json keeps the versions 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 and paste the code below.

Explanation of Code

Let me explain the above code we wrote. This code will create a basic application with no content at all. The first line in the code const electron = require(“electron”); loads the electron module we just installed. The second line const {app, BrowserWindow} = electron; destructures app and BrowserWindow from electron. 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 scripts section in your package.json file. After you added this script run the command npm start in your terminal and it will open a new application with no content. Make sure your package.json file looks like below.

 

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here