usecreate-react-appCreate the React + Ts project

  • Perform create
npx create-react-app electron-demo --template typescript
Copy the code
  • run
yarn start
Copy the code

Add the Electron

Install dependencies

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ yarn add electron -D
Copy the code

Create the main process entry file

In the previous “Creating the simplest Electron” application, we created main.ts as the main process entry file in the root directory.

In order to be more relevant to Web development, our project created the Web first. Therefore, we create the electron directory to store the contents related to the electron main process.

Create the electron/main.ts file.

Compile and start the main process

Previously, we mentioned that electron development is divided into the main process and the rendering process, which belong to different processes and can be regarded as different bundles.

  • In the rendering process, our TSC compilation module can beesnext
  • In the main process (Node), module iscommonjs

Of course, since our front end is running on electron(with Node), we can also use the same tsConfig configuration file directly, with module configured as CommonJS.

  • Compile and start the main process

If we expect our project to be able to independently deploy Web or build ELECTRON, we need to make a distinction.

Enable the Node capability using the Web UI

In the electron environment, our Web can use node capabilities, but we need to do some compilation configuration.

  • Enable the Node capability using the Web UI

Run the electron

The main process implements opening the window

Ts: in electron/main.

import { app, BrowserWindow } from 'electron'; Function createWindow () {const win = new BrowserWindow({width: 800, height: 600, webPreferences: {nodeIntegration: true,// Turn on the Node option contextIsolation: False // V12 with this option off to get the ability to use Node in a window}}) win.loadurl ('http://localhost:3000')}; app.whenReady().then(() => { createWindow(); });Copy the code

Up and running

Yarn dev: Main # Start the electron main processCopy the code

When the front end is running in Electron, we can call the front end part: the render process

build

The main process Webpack handles

  • Webpack handles the main process

Add the electron builder dependency

yarn add electron-builder -D
Copy the code

Add the electron builder configuration file

Before we build Electron, we have these steps:

  • Build the render process bundle
  • Build the main process bundle

Therefore, in the Electron build, we will copy the above products into the application. The above products, after our configuration above, exist in:

  • Render process bundle =>./dist
  • Main process bundle =>./electron-main

Create config/ Builder. js and copy the main process and render process bundle:

module.exports = {

  asar: false,

  extends: null, // fix bug https://github.com/electron-userland/electron-builder/issues/2030

  publish: {

    provider: 'generic',

    url: '',

  },

  files: [

    {

      from: './build',

      to: './build'

    }, {

      from: './.electron-main',

      to: './electron'

    },

    {},

  '!node_modules',

  'package.json'

  ],

};
Copy the code

Package. json related configuration

  • Modify the relative positions of front-end static resources
{

    "homepage": ".",

}
Copy the code
  • Modify the main process entry file
{

    "main": "./electron/main.prod.js",

}
Copy the code
  • Add package-related commands
{

   "scripts": { 

    "build:renderer": "react-app-rewired build",

    "build:main": "webpack --config ./config/webpack.main.js",

    "pack:electron": "yarn build:renderer && yarn build:main && electron-builder build --publish never --config ./config/builder.js",

  }

}
Copy the code

Modify the window loading path

At development time, our window loads the webpack-dev-server address:

win.loadURL('http://localhost:3000')
Copy the code

After packaging, we load the local HTML file, which is the compiled address. For example, we compile the entry HTML address as:

Build ├─ Manifest.json ├─ FavIcon.ico ├─ Index.html ├─...Copy the code
  • build/index.html

Based on the build configuration above, we configured the copy address:

{

      from: './build',

      to: './build'

    }
Copy the code

Therefore, our loading path is:

const isDev = process.env.NODE_ENV === 'development'; win.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '.. ')}/build/index.html`)Copy the code

Packaging test

Run YARN Pack :electron, the default product is in the dist directory:

├─ Build-debug. Yml ├─ Build-Effective - Config. yamL ├─ Electron tech- Demo -0.1.0- MAC Electron - tech - demo - 0.1.0 from. DMG ├ ─ ─ electron - tech - demo - 0.1.0 from. DMG. Blockmap ├ ─ ─ latest - MAC. Yml └ ─ ─ MAC └ ─ ─ electron-tech-demo.appCopy the code