Introduction to ElectronJS

Electron is a JavaScript library to make desktop applications. The applications made in Electron have a chromium wrapper and all the UI is displayed as webpages, so you can make the UI with HTML and CSS and power it with JavaScript. As easy as that!

Here are some apps which are made using Electron

• Visual Studio Code
• WhatsApp Desktop
• Mailspring
• Skype
• Streamlabs OBS

Today we will see how to set up Electron and make a basic app with Electron. You will require NodeJS installed. I’d recommend the latest version of NodeJS. Also, you should have a text editor installed, I’d recommend Visual Studio Code.

Firstly, let’s initialize a Node project, to do that, create a new folder of your choice and open a terminal in the folder. Type the following command to initialize a Node project

npm init -y

This will initialize your Node project and you should see a package.json file appearing in your folder. Now let’s install electron. Remember electron should be installed as a dev dependency!

npm install -D electron

Once Electron is installed, make a new file named electron.js and have the following template in the file. This template makes life easier without you needing to worry about configuring Electron from scratch.

Let’s see what is happening in the above code

• We are importing app and BrowserWindow from electron.
• We create a function where we create a new Chromium Window and set the file which should be loaded first, in this case, it is index.html.
• The nodeIntegration options tell whether the renderer process will have access to the Node specific functions.
• We are opening Chromium Developer Tools in the Chromium window by default when the window is loaded.

Now, we need to make a small change in the package.json file so that Electron knows which is the main file. Go to package.json and the following option in it

"main": "electron.js"

This will tell Electron that electron.js is the entry point and the main file for our Electron app.

Now let’s make a new index.html file and add some basic HTML to it!

Now, in the terminal type the following command to launch your application

electron .

And you should get this window once you type the command

If you get this window, congrats you have set up Electron and made your first Electron app 🚀

You can even install React inside Electron and you will see a React app running and it is a way more efficient way of making an Electron app. For more information about Electron, you can look at its documentation for all the Native APIs!

That’s all from me today! You can leave your questions in the comments section below or message me on Instagram at atharvadeosthale or click here

Atharva Deosthale