Companies use presents + Electron for PC application development, using open source project presents – Electron as a template (https://github.com/maximegris)… , but as the project went on, I was tortured by the following pain points:

  • [] Unable to hot-update the code of the main process by compiling the code of the main process using TSC (it needs to be restarted, which is very troublesome + time-consuming)
  • [] The main process and the renderer process are not started properly, so the renderer process needs to kill the application when it is closed.
  • [] The renderer process does not add an HMR, every time the code changes, resulting in the whole project Reload (very time-consuming)

Attention: the source code of this article is better:
https://github.com/simo-an/ng… 😁

Next, we will write a packing script to solve the above problem during our office hours

Start the rendering process usingangular-cliThe command

import NgCli from "@angular/cli"; import * as WaitOn from "wait-on"; function startRenderer(): Promise<void> { NgCli({ cliArgs: ['serve', '--configuration', 'development'] }); return WaitOn({ resources: ['tcp:4200'] }); // Listen on default port 4200}

Compile the main process, which we package with Webpack

Webpack configuration code is detailed at https://github.com/simo-an/ng…

🙄 So how do we do hot update of the main process?

  • Start the main process and record its process information
  • whenWebpackCheck for code updates, according to the processIDKill the original process
  • Restart the main process to update the recorded process information

Wouldn’t that be perfect (idea from Electron-Vue 😛)

The code to compile the packaged main process is as follows

import * as webpack from 'webpack'; import mainConfig from './webpack.main.config'; // Get the Webpack configuration file let ElectronProcess = null; Let manualRestart = false; Function startMain(): function startMain(): Promise<void> { return new Promise<void>((resolve, reject) => { const compiler = webpack.webpack(mainConfig); compiler.watch({}, (err, stats) => { if (err) { return ; } // error if (! electronProcess || electronProcess.kill) return resolve(); // The process has been killed // ManualRestart = true for the above three steps; process.kill(electronProcess.pid); electronProcess = null; startElectron(); // Electron setTimeout(() => ManualRestart = false, 5000); }); }); }

The code to start the application is startElectron(), and notice 🧐 we’re starting Electron now

let electronProcess = null; Let manualRestart = false; Function startElectron(): function startElectron() function startElectron(): Void {const args = ['--inspect=5858', path.join(__dirname, '../../dist/electron-main/main.js') // main process entry file]; ElectronProcess = spawn(require('electron'), args); electronProcess.on('close', () => { if (! manualRestart) process.exit(); }); }

In this part of the code, if I take the initiative to exit the application, I will kill the whole Process, which solves the problem that the main Process is closed and the renderer Process is still running.

Finally, start and run

Promise.all([ startRenderer(), startMain() ]).then(startElectron)

Scatter flowers, the end, we above the two pain points solved 😆

  • [x] Compile the main process code using Webpack packaging and add hot start (no restart, easy + save time)
  • [x] Master and render processes are configured to live and die together (convenient)

The last problem, however, is much easier to solve with Webpack11 +, by configuring module hot updates in angular.json ðŸĪ’

{/ /... "serve": { "development": { "hmr": true, "browserTarget": "ng-electron:build:development" } } // ... } / /... }

At this point, all three of our project’s pain points have been resolved

  • [x] Compile the main process code using Webpack packaging and add hot start (no restart, easy + save time)
  • [x] Master and render processes are configured to live and die together (convenient)
  • [x] Render process adds HMR, each code change, only re-render the corresponding module (save time)

😋 😋 😋 😋 😋 😋 😋 😋 😋 😋 😋 😋 😋 yellow one line 😋 😋 😋 😋 😋 😋 😋 😋 😋 😋 😋 😋 😋

See here you will have no doubt 😐

  • How can code you write in TS be run as a script with Node?
  • How do I use itelectron-builderPackaging?
  • Your one is really more open source than the one written by a foreigner4k+ starDoes it work better?
  • .

Then Clone down to look at the code, run on the computer, the above puzzle will be completely solved

Visit Star or Fork: https://github.com/simo-an/ng…