Building desktop applications with Electron-Getting started

One of the best ways to get started with Electron is to download Electron Quick Start project from GitHub. We will do just that, we will clone the repo, install the packages and run the app.

Make sure you have Git (https://git-scm.com/) and NodeJS (https://nodejs.org/) installed (we need them for cloning repo and for NPM (Node Packet Manager). With NPM, we will later install the dependecies of our Electron Quick Start project.

We will begin by cloning Electron Quick Start repo from GitHub. You can find it on GitHub by searching for electron quick start. Copy repo URL and type git clone in the terminal and paste the url:

git clone https://github.com/electron/electron-quick-start

Once the project is cloned, we can change directory to the name of the repo, in our case electron-quick-start:

cd electron-quick-start

The first thing we can do is to install the Node packages by typing:

npm install

Let’s open up our application in the code editor (I am using Visual Studio Code, which is also an Electron app). So, we are developing Electron apps inside of an Electron app, inception right there.

In Electron, the process that runs package.json’s main script is called the main process. The script that runs in the main process can display a GUI by creating web pages.

Since Electron uses Chromium for displaying web pages, Chromium’s multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process.

In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages allowing lower level operating system interactions.

If we take a look at the project structure, we can see four important files:

package.json — a file which points to the app’s main file and lists its details and dependencies.

main.js — a file which starts the app and creates a browser window to render HTML. This is the app’s main process.

index.html — a file representing web page to render. This is the app’s renderer process.

renderer.js — this file will be executed in the renderer process of our application

Once the installation of packages is complete, we can start our application by running NPM script called start by typing:

npm start