The preparatory work

Install the Node environment nodejs.org/zh-cn/ The installation process is not described.

Install the react scaffolding create-react-app and YARN

npm install -g create-react-app yarn
Copy the code

After the React project scaffolding is installed, run the following command to create an application named React -electron-demo

create-react-app react-electron-demo
Copy the code

The introduction ofElectron

Install the electron

cd react-electron-demo
yarn add electron --dev
yarn add electron-is-dev
Copy the code

Create an entry file main.js in the root directory

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 900, height: 680});
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, './build/index.html')}`);
  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () = > {if(process.platform ! = ='darwin') { app.quit(); }}); app.on('activate', () = > {if(mainWindow === null) { createWindow(); }});Copy the code

Add the entry file to package.json

"main": "main.js"."homepage": ".".Copy the code

Add the NPM scripts

"electron": "electron .".Copy the code

Start the

Yarn start // Create a terminal YARN electronCopy the code

The effect after startup is shown as follows:

To optimize the

useconcurrentlyRun in parallel

Running two terminals simultaneously is a bit cumbersome, so you can use the tool CONCURRENTLY. Install concurrently

yarn add concurrently --dev
Copy the code

Add the NPM scripts

"dev": "concurrently \"yarn start\" \"electron .\""
Copy the code

Disallows opening in browser on startup

Create a new file under the root directory. Env, enter:

BROWSER=none
Copy the code

Save the Settings and restart

Optimize startup sequence

Since electron starts after React starts, you can use the waIT-on tool. Wait – on installation

yarn add wait-on --dev
Copy the code

Modify the NPM scripts

"dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\""
Copy the code

Packaging releases

Install the electron – builder

yarn add electron-builder --dev
Copy the code

Add the Build field in package.json

"build": {
  "appId": "com.example.electron-cra"."files": [
    "build/**/*"."node_modules/**/*"."public/**/*"."main.js"]."directories": {"buildResources": "assets"}}Copy the code

Adding NPM scripts The following uses Windows as an example. For other platforms, see the electron builder document

"package": "yarn build && electron-builder -c.extraMetadata.main=main.js --win --x64"
Copy the code

packaging

yarn package
Copy the code

The packaged files are in the dist directory

The source code for this tutorial is hosted at github: github.com/AlanLang/re…

Thank you for your reading. If you find anything wrong with this article, please correct it.