Web - Electron


Electron is a framework to create Web Desktop app that is developped around the chrome browser.

Project Structure

A Electron app have at minimum the following folder structure:

├── package.json
├── main.js
└── index.html


All APIs and features found in Electron are accessible through the electron module:

const electron = require('electron')

See electron/electron-api-demos


Example of a minimal main script. For a bigger one, see electron/electron-quick-start/blob/master/main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({ width: 800, height: 600 })

  // and load the index.html of the app.

app.on('ready', createWindow)


The starting point is package.json.

An Electron application is essentially a Node.js application where the start is not done directly by node runtime but by the electron runtime.

  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  • Then start it
npm install # for any dependency
npm start # to start it




  • In Electron, the process that runs package.json's main script is called the main process.
  • Each web page in Electron runs in its own process, which is called the renderer process

The main process creates web pages by creating BrowserWindow instances. 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.

How to share data between web pages

Display Driver

Being based on Chromium, Electron requires a display driver to function. If Chromium can't find a display driver, Electron will fail to launch


The vast majority of Node.js modules are not native. Only 400 out of the ~650.000 modules are native. However, if you do need native modules, please consult this guide on how to recompile them for Electron.

single-page application

Electron is designed to work best as a single-page application. Clicking a link shouldn't load a new page but should manipulate the DOM to changes the contents on the same page.



Nearly all (over 90%) of ES2015 is available to use in Electron without the use of pre-processors because it's a part of V8 which is built into Electron.



npm install --save-dev electron

See other installation form at the doc



https://electronjs.org/devtron - an open source tool to help you inspect, monitor, and debug your Electron app. Built on top of the amazing Chrome Developer Tools.

Example: Devtron

To install and see a Devtron tab added to the DevTools:

npm install --save-dev devtron
  • Open the devtool (Ctrl+Shift+I)
  • Run the following from the Console tab of your app's DevTools

Devtron Installation

React Dev Tool


git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git .
# Starting development
yarn dev





See https://electronjs.org/docs/tutorial/boilerplates-and-clis



  • Azure Storage Explorer is an Electron app


Discover More
Card Puncher Data Processing
Visual Studio Code (VsCode)

Visual Studio Code is an electron app based on the Monaco HTML Editor. There is no notion of a project but the notion of component (extension). yeoman can help create a project structure....
Web - App Desktop

Web app in a desktop environment There is several kinds of framework : one that embeds a webkit based browser (chromium) that supports WebGL, WebWorkers, Audio, Video, Local Storage, etc (such as...
Web - Headless browser (Test automation)

A headless browser is an application/library that emulates a web browser but without a graphical user interface ie (without DOM / without the Web api) They are the basis to build a web bot. Build...

Share this page:
Follow us:
Task Runner