The company uses Angular+Electron for PC application development, using the open source angular-electron project as a template (github.com/maximegris/…) But as the project progressed, I was tortured by the following pain points:

  • Compiling the main process code using TSC does not allow the main process code to be hot updated (requires a restart, very cumbersome + time consuming)
  • The main and renderer startup processes are not well combined, so that when closing the application, the renderer needs to be killed separately (inconvenient)
  • The renderer didn’t add HMR, every code change caused the whole project to be reloaded (very time-consuming)

Attention: github.com/simo-an/ng-… 😁

Next, we’ll write a packing script to solve the above problem during our busy work hours

To start the render process, useangular-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 the default port 4200
}

Copy the code

Compile the main process, which we package using Webpack

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

🙄 How do we do hot updates for 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? (Thoughts from electron-vue😛)

Compile the code to package the main process as follows

import * as webpack from 'webpack';
import mainConfig from './webpack.main.config'; // Get the Webpack configuration file

let electronProcess = null;  // Remember the main process information
let manualRestart = false; // Record whether the main process was killed manually (i.e. whether it was hot started)

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

      // Manually restart, for the above three steps
      manualRestart = true;
      process.kill(electronProcess.pid);
      electronProcess = null;
      startElectron();    / / start Electron

      setTimeout(() = > manualRestart = false.5000);
    });
  });
}
Copy the code

Start the application with the following code startElectron(), note 🧐 below we startElectron

let electronProcess = null;  // Remember the main process information
let manualRestart = false; // Record whether the main process was killed manually (i.e. whether it was hot started)

function startElectron() :void {
  const args = [
    '--inspect=5858',
    path.join(__dirname, '.. /.. /dist/electron-main/main.js') // Main process entry file
  ];

  // Remember the main process (kill it the next time there is a code update)
  electronProcess = spawn(require('electron'), args); 

  electronProcess.on('close'.() = > {  if(! manualRestart) process.exit(); }); }Copy the code

In this part of the code, if I exit the application, I will kill the entire Process, which solves the problem that the main Process is closed while the renderer Process is still running.

Finally, start, run

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

Scatter flower, end, the two pain points above us solved 😆

  • Compile main process code with webPack package and add hot start (no reboot, easy + time saving)
  • Master and renderer are configured to live and die at the same time (convenient)

However, the last issue is much easier to fix in Webpack11 + by configuring module hot updates in angular.json 🤒

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

Copy the code

So far, all three pain points in our project have been solved

  • Compile main process code with webPack package and add hot start (no reboot, easy + time saving)
  • Master and renderer are configured to live and die at the same time (convenient)
  • The renderer adds HMR and only re-renders the corresponding module each time the code changes (save time)

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

See here you will have no doubt 😐

  • How can you write code in TS and run it as a script in Node?
  • How do I use itelectron-builderPackaging?
  • You this is really more open source than the foreigner wrote4k+ starIs it more useful?
  • .

Clone the code and run it on the computer

Welcome to Star or fork: github.com/simo-an/ng-…