Start with the official address.

What can Electron do?

In short, write computer software, and it’s cross-platform.

The common front-end vscode editor is written in electron, and electron has become the mainstream in cross-terminal solutions.

Advantages of electron

At the end of the day, Electron is a chrome shell in a way that, unlike a browser, uses Node to call up a PC native interface and interact with the local PC.

In the development, all use JS/TS, very friendly for front-end development.

The downside is that if your app is simple, the package will be 50MB +, because you’ll have to include the whole Chromium.

Configuring the Development Environment

The front-end project

Start by creating a front-end project with scaffolding, either creation-reacr-app or vue-CLI. I’m going to use react here.

npx create-react-app electron-demo
cd electron-demo
npm start
Copy the code

In this way, we will run a React project on port 3000. We will slightly change the contents of app.js to facilitate the later function display:

<div> Opens a new transparent window </div><div>Right click system menu</div>
Copy the code

Integrated electron

  1. First to install:
npm i electron
Copy the code

The installation of electron is troublesome and often fails. Try several times more. If it is impossible, you can specify the version. I used “electron”: “^11.3.0”.

  1. Then we create it in the root directorymain.jsFile, as follows:
const {app, BrowserWindow} = require('electron')
let mainWindow;

app.on('ready'.() = > {
    mainWindow = new BrowserWindow({
        width: 1024.height: 680.webPreferences: {
            nodeIntegration: true
        }
    })
    mainWindow.loadURL('http://localhost:3000')})Copy the code

The code is easy to understand. When the app environment is ok, create a window that specifies the width and height of the window and whether node is allowed to run on the page. Finally, open the window to the local port 3000.

Obviously, port 3000 is our React page address. In the development environment, we need to open the page first and then open the electron window.

  1. And finally, let’s modify itpackage.json, specify the entry file for electron and run the electron command.
{
  // ...
  "main": "main.js"."scripts": {
    // ...
    "start": "react-scripts start"."dev": "electron ."}}Copy the code

At this point, we can run NPM start and run NPM run dev again after the page loads to open the electron window for development.

Optimize the development experience

  1. Dev environment identification.

In the test environment, the window pointed to the front-end service, but after the package, we executed the react package directory index.html file. The electron is-dev plugin can be used to determine whether the dev environment is currently in place.

npm i electron-is-dev --save--dev
Copy the code

Make some changes to the main.js file:

const isDev = require('electron-is-dev')
app.on('ready'.() = > {
    // ...
    const urlLocation = isDev ? 'http://localhost:3000' : 'Packaged file address'
    mainWindow.loadURL(urlLocation)
})
Copy the code
  1. Merge command.

Every time you develop, you need to start first, and wait for the success of the next window to run dev, it is too troublesome. So can a dev command make the project run perfectly?

The first idea was to connect start and dev with ampersand on the command line, but there were two problems:

  1. Windows is not supported&Symbols.
  2. If the electron is faster than the React project, the screen will be blank and you need to wait until the React project is ok to refresh.

The solution is to use the CONCURRENTLY and WaIT-on tools.

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

Concurrently, the solution is window compatibility. Wait-on is used to listen on port 3000. Run the electron command after port 3000 is ok.

The dev command is as follows:

{
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""
}
Copy the code
  1. Disable self-start of the browser.

The BROWSER=none environment variable is not compatible with % env-var % in Windows and $env-var in Linux, so cross-dev is needed. So, the final dev command looks like this:

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

When we run NPM run dev, the ELECTRON project will automatically open and our React project will be displayed.

At this point, the development environment is complete.

Two functional analyses of electron.

Earlier we wrote two div tags, one for opening the new transparent window and one for right-clicking the native menu action.

  1. The electron thread can be understood as the main.js main thread, which is responsible for rendering our main window. When we want to open a new window in a project, we send a message to main.js, which creates a thread to render the new window. In short, each window is a thread that receives and sends messages via main.js, scheduling Windows with each other. This will be shown in the code that opens the new transparent window.

  2. The second core feature of Electron is the ability to call the native API. We will call the native right-click menu on Windows and MAC by right clicking the native menu case.

To be continued…