Introduction to the ELECTRON client & Requirements

A recent project of the company is not suitable for b-end access. The product manager’s ideal is to build a PC client during the requirement review, but the company does not have a PC client. What should we do? Here we go. It’s time to play B.

Ahem, that, that. I got it. I got it.

The body of the

1. Involve technology

The technology stack of the company is React, the project is the background, and the framework must choose Ali’s Ant Design Pro and the packaging tool Electron builder.

2. Create projects

Create an Ant Design Pro project using the official scaffolding, of course.

Yarn create umi Select the Boilerplate type (Use arrow keys) ❯ ant-design-pro-create project with an layouts-only ant-design-pro boilerplate, use together with umi block. app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.Copy the code

The following according to their own situation to choose.

OK, the project runs and the body begins.

3. Project transformation into ELECTRON

Step 1: Create main.js in the project root directory (SRC sibling). Function: Electron inlet configuration

const {app, BrowserWindow, globalShortcut} = require('electron') const path = require('path') function createWindow () { // Create the browser window. const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') }, nodeIntegration: true, webSecurity: false, allowRunningInsecureContent: ----react package // mainwindow.loadurl (path.join('file://', __dirname, 'ant/index.html')) // load application ---- applies to react development project mainwindow.loadurl ('http://localhost:8000/'); / / open the debug. / / mainWindow webContents. OpenDevTools ()} app. WhenReady (). Then (() = > {createWindow () app. On (' activate ', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // Quit when all windows are closed. app.on('window-all-closed', function () { if (process.platform ! == 'darwin') app.quit() })Copy the code

The above code focuses on three points:

Point 1: Configure the entry file after the project is packaged. (This path will be mentioned later)

mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))
Copy the code

Second point: configure the development-time entry, this path according to their own project after the path, convenient local debugging.

mainWindow.loadURL('http://localhost:8000/');
Copy the code

Third point: whether to start the debugging tool. In Electron, you can also press the shortcut key to open the MAC: Option+Command + I

windows: Ctrl+Shift+I

mainWindow.webContents.openDevTools()
Copy the code

Step 2: Package. json configuration (add)

{"main": "main.js", // configure the electron entry to correspond to the previous main.js, because it is the same as package.json with "homepage": ".", // solve the problem of packing after the absolute path "scripts": {"estart": "electron.", // electron running},}Copy the code

Step 3: Take off 🛫️

// Run both the React project and the electron YARN Start && YARN ESTartCopy the code

Electron client

The browser

OK, perfect.

Step 4: Transform Ant Design Pro before packaging

  1. The config -> config.js file is modified as follows
Export default defineConfig({// add a line, ant default is histroy route, history: {type: 'hash'}, // where '/' is changed to './' publicPath: './',})Copy the code
  1. config -> plug.config.js
config.target('electron-renderer');
Copy the code
  1. Change the entry reference in main.js before packaging
----react package mainwindow.loadurl (path.join('file://', __dirname, 'ant/index.html')) // load application ---- applies to react development project // mainwindow.loadurl ('http://localhost:8000/');Copy the code

In the implementation

yarn build
Copy the code

Since ant packs the same path as electron packs the./dist./dist, change the ant packed ‘dist’ directory to ‘ant’ and the entry in main.js is ‘ant.index.html’.

Step 5: Pack (key) Think long and hardelectron-builderandelectron-packagerChoose the former

  1. Install the electron – builder
yarn add electron-builder
Copy the code
  1. Package. Add json
"build": { "appId": "name", "mac": { "category": "category", "target": ["dmg","zip"] } }, "scripts": { "ebuild": "Electron builder --win --x64", // Pack Windows} "electron builder --win --x64", // Pack Windows}Copy the code

3. Pay special attention to execute the package command to the source resources of the corresponding system, in this case, the ladder (VPN) is required. If the command line installation at this time, there is a pit, the command line to proxy, the following port number should be consistent with your ladder corresponding proxy interface.

Export http_proxy = http://127.0.0.1:41091 export https_proxy = http://127.0.0.1:41091Copy the code

The last execution

yarn ebuild
or
yarn ebuildw
Copy the code

end