Monday, 19 June, 2017 UTC


Summary

Electron is a framework for building cross platform desktop applications using Node.js and Chromium. Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.
Installing Electron
Before installing electron, make sure that you have installed nodejs on your computer. If you have not installed already, get the installer from here. Note that this installs npm as well for you. Once the installation is complete, you can confirm that node and npm are installed by running the following commands in your terminal.
Install electron globally by running the following command in the terminal.
npm install -g electron
Tip: If the installation stops on “node install.js” when you try the above command, it means that it is still downloading electron package. If you wish to see the download progress, type the following command to install electron.
npm install electron –verbose
You can confirm that electron is installed by running the following command.
electron -v
Main and Renderer Processes
The main process creates web pages by creating BrowserWindow instances. As the name suggests, the BrowserWindow class gives you the ability to create a browser window.
Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.
The main process manages all the renderer processes.  Each renderer process is isolated and only cares about the web page running in it.
File Structure
The electron app mainly requires three files: package.json, main.js, and index.html. The folder structure would be as follows:
electron-app/
  • index.html
  • main.js
  • package.json
Creating first electron app
Create a project folder and let’s create a package.json file. Navigate to the project folder in terminal and type the following command.
npm init
You will be asked for the following information and just keep pressing enter. Enter your name at the “author name” field.
Now, create main.js and index.html files in your project folder. Add the following code in main.js file.
const {app, BrowserWindow} = require("electron");
const url = require("url");
const path = require("path");
let win;
app.on("ready", function(){
win = new BrowserWindow({width: 400, height: 400});
win.loadURL(url.format({
pathname: path.join("Path to your project folder directory", "index.html"),
protocol: "file:",
slashes: true
}));
});
Add some header and text in your index.html file.
Running your app
Make sure to navigate till your project directory in terminal. Type the following command.
electron .
We can also run the app by adding following script in package.json file.
"scripts": {
"start": "electron ."
}
Then run the following command in terminal.
npm start
The app should look something like this:
 
Wrapping Up
Electron offers a way to create desktop applications with the web technologies that we already know without the need to learn new languages that are specific to operating systems. It also includes automatic app updates, Windows installers, other useful native app features that are exposed through JavaScript APIs.
Read the official Electron documentation for more information and also ways to distribute your application.