Detailed explanation of how to generate desktop application with React in Electron

1. Introduction to Electron

Electron is a framework that allows you to create desktop applications using JavaScript, HTML and CSS. These applications can be packaged and run directly on macOS, Windows, and Linux.

In the current Internet environment where browsers and mobile devices are popular, cross-platform desktop application development also provides a new branch direction for the front-end.

2. Construction preparation

1. Check whether git and node are installed

git --version
node -v
npm -v

2. Build React

Install create-react-app

npm install -g create-react-app

Create my-electron-app project

create-react-app my-electron-app

Start the project

cd my-electron-app && npm start

3. Install the electron package

npm i --save-dev electron

3. Create basic applications

First of all, you need to understand Electron. Developing applications with Electron is like building an application with a web interface. Also using a file as the main entrance. The main script specifies the entrance to the Electron application that runs the main process, here is the file.

1. Create a file

// Import app and BrowserWindow modules// app controls the application's event lifecycle.  Event call ('eventName', callback), method call (arg)// BrowserWindow creates and controls browser windows.  new BrowserWindow([options]) Event and method call the same app// Electron reference documentation /docsconst { app, BrowserWindow, nativeImage } = require('electron');
   const url = require('url');
   const path = require('path');
function createWindow () {
  let mainWindow = new BrowserWindow({
    width: 800, // Window width    height: 600, // Window height    title: "Electron", // Window title. If the HTML file loaded by loadURL() contains the tag <title>, this property can be ignored.    icon: ('src/public/'), // "string" || ('src/image/icons/')Create a new NativeImage instance from a file located in the path    webPreferences: { // Web page function settings      nodeIntegration: true, // Whether to enable node integration? The content of the rendering process has the ability to access node      webviewTag: true, // Whether to use the <webview> tag to display external web content in a separate frame and process      webSecurity: false, // Disable homologous policy      nodeIntegrationInSubFrames: true // Whether to allow integration in child pages (iframes) or child windows (child windows)    }
  });
  // Load the application --After packing the react application, __dirname is the current file path  // (({
  //   pathname: (__dirname, './build/'),
  //   protocol: 'file:',
  //   slashes: true
  // }));
  // Loading the application --Development stage Need to run npm run start  ('http://localhost:3000/');
  // Solve the problem of application startup white screen  ('ready-to-show', () =&gt; {
    ();
    ();
  });
  // Published when the window is closed.  After you receive this event, you should delete the reference to the window and avoid using it again.  ('closed', () =&gt; {
    mainWindow = null;
  });
}
().then(createWindow);
('window-all-closed', () =&gt; {
  if ( !== 'darwin') {
    ()
  }
});
('activate', () =&gt; {
  if (().length === 0) {
    createWindow()
  }
});

2. Modify the file

The main process file has been created and modify the file.

(1) Configure the startup file and add the main field, and we are the file here. If not added, Electron will attempt to load the file contained in the file directory.

(2) Configure the run command and use "electron-start": "electron ."

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "private": true,
  "main": "",  // Configure startup file  "homepage":".", // Set the root path of application packaging. For more information, please refer to: /a/1190000021875558  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",  // react start command    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "electron ."  // electron start command  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^11.1.1"
  }
}

3. Start Electron

The preparations are completed and start

If you set ('http://localhost:3000/'); in the file, you need to start the react project

Start react project

npm start

Start the electron

npm run electron-start

4. Packaging the project

1. Package react project

npm run build

Release the method that is commented in the main file for react packaging.

2. Packaging electron using electron-packager dependencies

npm install electron-packager --save-dev

3. Configure the packaging command

"package": "electron-packager . my-electron-app --platform=win32 --arch=x64 --overwrite --electron-version=11.1.1"

4. Configuration explanation

electron-packager <application directory> <application name> <packaging platform> <schema x86 or x64> <schema> <electron version> overwrite If the output directory already exists, replace it

5. Run the package command

npm run package

This is the end of this article about the detailed explanation of the method of Electron Packaging React to generate desktop applications. For more related content on Electron React desktop applications, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!