Angular - Electron Forge

This repo is a reference implementation of an Angular 18 app working in Electron.

Electron is integrated using Electron Forge, and this is why.

As the monorepo is a Nx workspace, it is simple to add more apps, if needed, as explained below.

Features

• Angular 18
  • Eslint w/ Prettier
    • Custom rules can be added to eslint.custom.config.js
  • Tailwind
    • Configuration file is tailwind.config.js
• Electron
  • Electron Forge
  • Security best practices
    • preload.ts can expose APIs to the renderer process (ie. web apps) and cannot import files
    • index.ts is the entry point of the main process
  • Dependencies
    • Add dependencies of the main process to this package.json, in addition to the root one

npm scripts

Development

The dev command is start:

1. Start Angular app in serve/watch mode
2. Build the Electron app in watch mode
3. Start Electron as soon as the Angular app is ready

So you can use:

npm start

Electron forge build

The following scripts has been setup to leverage the Electron Forge Build Lifecycle:

• npm run electron:package
• npm run electron:make
• npm run electron:publish

Nx tasks

✨ This is a Nx workspace ✨.

Learn more about this workspace setup and its capabilities or run npx nx graph to visually explore what was created.

Angular / Web app

To run the dev server for your app, use:

npx nx serve angular-electron-forge

To create a production bundle:

npx nx build angular-electron-forge

To see all available targets to run for a project, run:

npx nx show project angular-electron-forge

These targets are either inferred automatically or defined in the project.json or package.json files.

More about running tasks in the docs »

Add new projects

While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.

Use the plugin's generator to create new projects.

To generate a new application, use:

npx nx g @nx/angular:app demo

To generate a new library, use:

npx nx g @nx/angular:lib mylib

You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.

Learn more about Nx plugins » | Browse the plugin registry »

Electron

To see all available targets to run for a project, run:

npx nx show project electron