The React + Electron RSS reader is available at github.com/breeze2/bre… Record the general development process here.

Initialize the

Create a project

Use the React application as a base to initialize the project step by step. Install the YARN tool in advance, use Yarn to create a React application project, say demo, and introduce the Electron dependency.

$ cd /PATH/TO/PROJECTS
$ yarn create react-app YOUR_APP_NAME
$ cd /PATH/TO/PROJECTS/YOUR_APP_NAME
$ yarn add electron --dev
Copy the code

Configuration entry file

After the project is created, the approximate directory structure is as follows:

|-->demo
    |-->node_modules
        |--...
    |-->public
        |--index.html
        |--...
    |-->src
    |--package.json
    |--...
Copy the code

Generally speaking, the React app’s entry file is public/index.html, while the Electron app’s entry file should also be stored in the public directory and named Electron. Js (so that the Electron Builder can recognize it automatically).

First add the main configuration to the lectron application entry file in package.json:

{... "main": "public/electron.js", ... }Copy the code

Public/electron. Js code:

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

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 960.height: 600,
    })
    mainWindow.loadFile('index.html')
    mainWindow.webContents.openDevTools()
    mainWindow.on('closed'.function () {
        mainWindow = null
    })
}

app.on('ready', createWindow)

app.on('window-all-closed'.function () {
    if(process.platform ! = ='darwin') {
        app.quit()
    }
})

app.on('activate'.function () {
    if (mainWindow === null) {
        createWindow()
    }
})
Copy the code

After running yarn electron./, the electron application can be started. However, the React application is not started.

Start the application

The react application can be mounted to local port 3000 (http://localhost:3000) using the yarn react-scripts start command for development and debugging. To develop and debug with React and Electron, install Electron – IS-dev to identify the current development environment.

$ yarn add electron-is-dev
Copy the code

The normal development environment is to load http://localhost:3000/, the formal environment is to load.. /build/index.html file, so change the public/electron. Js code (inside createWindow) :

const isDev = require('electron-is-dev')... --// mainWindow.loadFile('index.html')
++    if (isDev) {
++        mainWindow.loadURL('http://localhost:3000/')
++    } else {
++        mainWindow.loadFile(path.join(__dirname, '/.. /build/index.html')) + +}...Copy the code

Then, in the project directory, open two terminals and run yarn react-scripts start and yarn electron./ to develop and debug the react + electron application. Don’t envy electron-vue, can be a command can be directly started, in fact, the principle is the same. It is not difficult to start a command by putting two commands together. Install the tool library first:

$ yarn add concurrently --dev
$ yarn add wait-on --dev
Copy the code

Modify package.json by adding a superelectron dev script command:

{... "scripts": { ... "electron-dev": "concurrently \"BROWSER=none react-scripts start\" \"wait-on http://localhost:3000 && electron .\"", ... }... }Copy the code

In this case, run yarn electronic-dev to start the React + electron application.

JS runtime

In general, browsers provide one JS runtime and NodeJS provides another, and Electron provides a combination of the two. However, the two runtimes are not perfectly compatible. For example, when using WebPack, javascript code packaged by Webpack cannot directly import the functional interface provided by NodeJS through the import keyword or require function. Because Webpack overrides NodeJS’s built-in require function. In Electron, the require property of the window object is mapped to the NodeJS require function. For example, to call the HTTP interface provided by NodeJS, write:

const http = window.require('http')
Copy the code

Recompile the NodeJS extension

In general, libraries implemented in pure JS code can run in the Electron environment. However, some NodeJS libraries are not implemented in pure JS code, such as Node-sqlite3. Node-sqlite3 is written in C++ and is considered an extension to NodeJS rather than a pure tool library. Node-sqlite3 needs to be recompiled for the Electron environment to run in the Electron environment.

electron-rebuild

Electron -rebuild is a tool for recompiling the NodeJS extension specifically for electron environments. In the project directory, install the electron rebuild:

$ yarn add electron-rebuild --dev
Copy the code

For example, to recompile Node-sqlite3, you just need to:

$ yarn electron-rebuild -f -w sqlite3
Copy the code

On MacOS it’s that simple, but on Windows it’s more complicated.

Recompile the NodeJS extension on Windows

You can also use the electron rebuild tool on Windows, but the build environment must be preconfigured.

First, install the Window compiler:

$ npm install --global --production windows-build-tools
$ npm config set msvs_version 2017
Copy the code

Python2 must not be Python3. If both Python2 and Python3 are installed, NPM must specify the Python2 executable path to avoid calling Python3:

$ npm config set python /path/to/executable/python2
Copy the code

In this way, the electron rebuild command can be invoked on the Windows system. If a CONNECT ERROR occurs during the electron rebuild execution, it may be a network problem. You can change the source to Taobao and try again.

Use NodeJS extensions as little as possible to avoid recompiling across platforms.

The application package

After the application is developed, it needs to be packaged into an installation file such as DMG or EXE. You can use the electron Builder

electron-builder

The electron builder has many configuration options to call a variety of program packages. Here is a brief overview of the MacOS installer and the packaged configuration of the Windows NSIS installer (NSIS is an open source installer for Windows).

Modify package.json to add build configuration:

{... $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ True, // Recompile NodeJS extension "MAC ": {"category": "news", // Apply category" icon": "build/icon.png" // Apply icon path}, "win": {"icon": "build/icon.png", // apply icon path "target": "nsis" // Target type of Windows installation file}, "nsis": {" allowToChangeInstallationDirectory ": true, / / is it allowed to modify the installation path" allowElevation ": False, // Whether to allow permission promotion "createDesktopShortcut": true, // Whether to create a desktop shortcut "menuCategory": true, // Whether to create a category "oneClick" in the menu bar: False / / is a key installation}, "files" : "build / * * / *" / / introduction file]}... }Copy the code

Then, you can pack the Electron application:

$yarn react-scripts build // Use webpack to pack the react application into the 'build' directory. $yarn eletron-BuilderCopy the code

Of course, formal packaging also requires code signing, and for more configuration, see the electron builder configuration instructions.

reference

  • From React to an Electron app ready for production