angular-electron-boilerplate icon indicating copy to clipboard operation
angular-electron-boilerplate copied to clipboard

Add Hot-Reloading for Renderer and Renderer+Main

Open andgeno opened this issue 3 years ago • 0 comments

I added two new scripts that are meant to be run by devs:

  • start:dev:hot-reloading:renderer+main
  • start:dev:hot-reloading:renderer-only

I also changed the 'start' script to default to the new 'renderer+main' script because this is probably the best user experience while developing your application.

There are three more new scripts that are only for internal use. Maybe these should be prefixed with an underscore or hash?

How it works

Renderer: Webpack will watch the renderer source directory and rebuild files as needed which will also results in a hot-reload inside the Angular app.

Renderer+Main: In addition to the behavior described above, the running Electron process will be watched using the 'ElectronReloadPlugin' plugin. The plugin will kill and respawn Electron whenever files in the main source directory are changed.

In both cases Electron is launched in parallel to the rest of the application and will wait until port 4200/TCP is open. Through this network port Angular is able to communicate with the WDS (Webpack Dev Server).

Depending on the selected script (Renderer or Renderer+Main), Electron will simply launch and use the files in dist/main or it will be killed and respawned by the reloader plugin as needed.

The implementation of the Renderer script contains a little QoL feature which takes care of shutting down the renderer watcher as soon as the Electron process has shutdown. Unfortunately, this is not the case with the Renderer+Main script. The user will have to stop the process manually (e.g. Ctrl-C) for now.

andgeno avatar Jan 18 '21 02:01 andgeno