Three months ago, someone took me to make a desktop application for his civil service colleagues, using this electron-react- Boilerplate template, and stomped a lot of holes. At that time, I tried to introduce react into electron by myself, and I also tried to introduce electron into REACT, all of which failed until I watched a teaching video and recorded it now

Initialize the project

1. Use the NPM command to initialize the project

npm init -y 
npm install electron -D
Copy the code

Electron, as we all know, consists of a main thread and a render process that communicates via IPC (more on this later). We create SRC and Pages folders in the Render folder and type them under the SRC folder

create-react-app main
Copy the code

3. Modify startup commands. Modify startup scripts in package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:render": "cd renderer/src/main && npm run start"
  },
Copy the code

4. Start the React project

5. Start the electron project script modification

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:main": "electron .",
    "start:render": "cd renderer/src/main && npm run start"
  },
Copy the code

The project structure

Electron - react - template ├ ─ package. Json. / / the packeage outside json ├ ─ result. TXT ├ ─ the renderer / / rendering process | ├ ─ SRC | | ├ ─ the main | | | ├ ─. Gitignore | | | ├ ─ README. Md | | | ├ ─ config - overrides. Js | | | ├ ─ package. The inside of the json / / packeage. Json | | | ├ ─ yarn. The lock | | | ├ ─ SRC | | | | ├ ─ App. CSS | | | | ├ ─ App. Js | | | | ├ ─ App. Test, js | | | | ├ ─ index. The CSS | | | | ├ ─ index. The js | | | | ├ ─ logo. SVG | | | | ├ ─ serviceWorker. Js | | | | └ setupTests. Js | | | ├ ─ public | | | | ├ ─ the favicon. Ico | | | | ├ ─ index. The HTML | | | | ├ ─ logo192. PNG | | | | ├ ─ logo512. PNG | | | | ├ ─ the manifest. Json | | | | └ robots. TXT | ├ ─ pages ├ ─ | main / / the main process └ index. JsCopy the code

Introduce electron in React

Error writing in app.js like this

import { ipcRender } from 'electron';
Copy the code

There are two ways to do this

Using the window. The require (” electron “)

const { ipcRender } = window.require('electron')
Copy the code

Modify target (modify CRA)

For details, see Target

Install the following dependencies in inner Packerage. json

npm i customize-cra react-app-rewired -D
Copy the code

react-app-rewired

customize-cra

Config-overrides. Js (place it under the react root)

const { override } = require('customize-cra')
function addRendererTarget(config) { 
    config.target = 'electron-renderer'
    return config;
}
module.exports = override(addRendererTarget)
Copy the code

2. Modify the React project scripts

// before "start": "BROWSER=none react-scripts start", // after "start": "BROWSER=none react-app-rewired start"Copy the code

App.js is introduced into ipcRender

Command combination Modification

We can see how cumbersome it is to start a project with two commands. You can combine the two commands and install them in external package.json

npm i concurrently wait-on -D
Copy the code

concurrently wait-on

Modify startup command [external package.json]

 "start": "concurrently \"npm run start:render\" \"wait-on http://localhost:3000 && npm run start:main\" ",
Copy the code

Mean, etc.npm run start:renderStart after you finishnpm run start:mainThe inputnpm run startYou can visit

Other tips

  • When you start the React project, you can set it not to automatically jump to the browser
"start": "BROWSER=none react-scripts start"
Copy the code
  • Start the electron debugging tool
 win.webContents.openDevTools()
Copy the code

Other templates

electron-vue

svelte-template-electron

angular-electron

The project address

Github.com/MissNanLan/…

Existing problems

Since there are two packages. json, I have to install both dependencies, which is very inconvenient