What is ElectronJS and what does it do?

A quick introduction to Electron JS.

What is Electron JS?

Electron JS is a tool that allows you to build native desktop apps for Mac and Windows by using purely HTML, CSS, and JavaScript. Many popular apps that you are probably already using or have used, have been built with Electron, including:

• Slack
• Discord
• Skype
• Visual Studio Code
• WordPress Desktop
• WhatsApp Desktop

And many more.

How Electron JS works

On the front-end you can build your Electron app’s UI using any of the popular web frameworks like React, Angular, and Vue. You can also just use purely native JavaScript.

On the back-end Electron uses Node.js which allows you to access low level APIs, such as your computer’s File System, which you normally don’t get access to when using a browser.

Setup & Install Electron JS

To set up and install Electron on your machine, create a new directory/folder on your computer (mkdir nameofyourfolder) and cd into it. Now run the following commands inside your empty directory:

Create package.json

npm init -y

Install Electron

npm i electron -D

Now create a main.js file in the root directory. This file will serve as the main entry point in your Electron app.

This was just a quick introduction to Electron JS — once I get more familiar with it I’ll start publishing tutorials documenting what I’ve learned :)

For now, checkout the official Electron JS docs.