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.
1 2 3 4 5 |
npm init // it will create a package.json file after couple of questions |
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.
1 2 3 4 5 |
npm install electron // it will install electron |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
const electron = require("electron"); const {app, BrowserWindow} = electron; function createMainWindow(){ const mainWindow = new BrowserWindow(); } app.on("ready",createMainWindow); |
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.
1 2 3 4 5 |
// don't copy const electron = require("electron"); const {app, BrowserWindow} = 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 the scripts section in your package.json file. Make sure your package.json file looks like the one below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "name": "first-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start" : "electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "electron": "^13.0.1" } } |
Now, run the following command.
1 2 3 4 5 |
npm start |
Here is a screenshot of the app we just developed.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>First App with Electron</title> </head> <body> <h1> Hello World! </h1> </body> </html> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const electron = require("electron"); const {app, BrowserWindow} = electron; function createMainWindow(){ const mainWindow = new BrowserWindow(); mainWindow.loadURL(__dirname+"/index.html"); //add this line } app.on("ready",createMainWindow); |
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.