Web - Electron

API

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

• electron.app class manages the lifecycle of the application
• electron.BrowserWindow class manages/creates a windows

const electron = require('electron')

See electron/electron-api-demos

main.js

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.
  win.loadFile('index.html')
}

app.on('ready', createWindow)

package.json

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

Process

• 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

Module

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.

Options:

• react
• jquery tab

Language

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.

Installation

npm install --save-dev electron

See other installation form at the doc

Testing

• https://electronjs.org/docs/tutorial/testing-on-headless-ci