Electron quick start

May 25, 2021 Electron

1. Brief introduction

2. The main process

3. The rendering process

4. The difference between the main process and the rendering process

5. electron-prebuild

6. Manually download the Electron binary

Get started quickly

Brief introduction

Electron lets you create desktop apps by calling rich native APIs using pure JavaScript. You can think of it as a variant of the io .js focused on desktop applications rather than web servers.

This does not mean that Electron is JavaScript bound to the GUI library. Instead, Electron uses a web page as its GUI, so you can think of it as a lite version of the Chromium browser controlled by JavaScript.

The main process

In Electron, the process running package.json is called the main process. main Scripts that run on the main process can present the GUI as a web page.

The rendering process

Because Electron uses Chromium to present pages, Chromium's multi-process structure is also fully utilized. Each Electron page is running its own process, which we call the Render process.

In a typical browser, Web pages typically run in a sandbox environment and do not allow access to native resources. However, Electron users have the ability to call io.js APIs in a Web page and interact directly with the underlying operating system.

The difference between the main process and the rendering process

The main process uses the BrowserWindow instance to create a Web page. E ach BrowserWindow instance runs a Web page in its own rendering process. When a BrowserWindow instance is destroyed, the rendering process is also terminated.

The main process manages all pages and the rendering process that corresponds to them. Each rendering process is independent of each other and cares only about their own pages.

Because managing native GUI resources in a Web page is dangerous and prone to resource leakage, it is not allowed to invoke GUI-related APIs on Web pages. If you want to use GUI operations in a Web page, the corresponding rendering process must communicate with the main process and request the main process to perform the relevant GUI operations.

At Electron, we provide ipc modules for communicating between the main process and the rendering process. There is also a remote process call style communication module remote.

Build your first Electron app

In general, the directory structure of an Electron app is as follows:

your-app/
├── package.json
├── main.js
└── index.html

package.json format is exactly the same as Node's, and main field is the startup script for your app, which runs on the main process. package.json should look like:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

Note: If the main field is not package.json Electron loads index.js

main.js example of a main system that should be used to create windows and process system time:

var app = require('app');  // 控制应用生命周期的模块。
var BrowserWindow = require('browser-window');  // 创建原生浏览器窗口的模块

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发工具
  mainWindow.openDevTools();

  // 当 window 被关闭，这个事件会被发出
  mainWindow.on('closed', function() {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 但这次不是。
    mainWindow = null;
  });
});

Finally, you want to index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

Run your app

Once you've main.js index.html and package.json files, you might want to try running and testing locally to see if it works as expected.

electron-prebuild

If you already have electron-prebuilt npm you just need to run your app directly as follows:

electron .

If you are partially installed, that runs:

./node_modules/.bin/electron .

Manually download the Electron binary

If you manually download electron's binary, you can also run your app directly using the binary.

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

OS X

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app is the Electron release package, which you can download here.

runs as a release

After you've finished your app, you can follow

App deployment

Guide the release of a version and run the app as if it had been packaged.