This template provides a starting point of a modern and secure Electron app.

Use Angular for the Electron renderer process. Using a modern frontend framework helps you organize your codebase once your Electron app grows in complexity. Use the Angular CLI to generate components, routes, services and pipes. To give a modern look-and-feel Angular Material is used. This can easily be removed if it is not needed.

Use TypeScript for strongly-typed JavaScript.

Use webpack to pack main and preload to produce small fast build output. Everything is packed, so no need to include the /node_modules folder, in order to remove unnessesary files and to produce small and fast builds.

Use most secure Electron security settings: contextIsolation and disabled nodeIntegration and disabled enableRemoteModule. preload uses the contextBridge.

Builds

All packages are specified under devDependencies since, due to the webpack usage, no modules in the /node_modules folders are needed for production.

Try out this template:

$ git clone https://github.com/frederiksen/angular-electron-boilerplate
$ cd angular-electron-boilerplate
$ npm install
$ npm run build:dev:all
$ npm start

This builds a project and places the output in the /dist folder.

Start watching for source code changes, and builds after each source code change.

Test commands.

Commands for updating NPM modules.

Use Code to get a super debug environment.

This extension is needed: Debugger for Chrome

First be sure to have build everything:

$ npm run build:dev:all

Now set some breakpoints both in the main source code and in the renderer source code.

From Code press Ctrl+Shift+D and select Main + Renderer and press F5

This is where all the magic happens.

$ npm run release

Then your app will be put into the /release-builds folder. Can build an app for Windows, macOS and Linux.