Overview

Depending on your need, putting up Electron and Angular may require a lot of setup. Fortunately, this simple project will help you go fast and directly start building desktop apps in Typescript with live reload.

Because building a desktop app with Electron and Angular shouldn't be difficult.

Main features :

• This project is based on last Angular 12 version with required dependencies for Electron 13.
• This project is also written in Typescript 4 and includes test samples (Jasmine and Spectron 15).
• The app is runnable on desktop (with live-reload in development mode).
• The app is also runnable on browser but without Electron features.
• You can generate your platform distributables thanks to electron-forge.
• You are also granted a minimal size for your app thanks to the packaging based on itswebpack-template.

Project structure :

├── ./CHANGELOG.md
├── ./LICENSE
├── ./README.md
├── ./_config.yml
├── ./commitlint.config.js
├── ./package-lock.json
├── ./package.json
├── ./tsconfig.json
├── ./webpack.main.config.js
├── ./webpack.plugins.js
├── ./webpack.renderer.config.js
├── ./webpack.rules.js
└── ./workspaces
    ├── ./workspaces/angular-app       # Angular source directory (web renderer part)
    ├── ./workspaces/electron-app      # Electron source directory (main & preload part)
    ├── ./workspaces/electron-e2e      # Electron end-to-end test directory
    └── ./workspaces/shared-lib        # Shared source directory (common part)

Getting started

To clone and run this repository, you'll need installed on your computer at least :

• Git
• Node 14
• Npm 7
• Angular-CLI 12

Then from your command line:

# Upgrade to the latest version of npm (if necessary)
npm install -g npm@latest

# Upgrade to the latest version of Angular CLI (if necessary)
npm install -g @angular/cli@latest

# Clone this repository
git clone https://github.com/sourcygen/electron-angular-quick-start.git

# Then go into the repository
cd electron-angular-quick-start

# After that, install dependencies
npm install

# And finally run the app (dev mode)
npm start

How to use

Command	Description
npm run install	Install dependencies
npm run start	Run the app on desktop (dev mode)
npm run start:angular-app	Run the app on browser (dev mode)
npm run test:electron-e2e	Run electron end-to-end tests
npm run package	Build and prepare application content
npm run make	Generate platform distributables (./out)
npm run clean	Delete generated outputs

Adding dependencies

This project architecture is based on npm workspaces. This allows having different version of the same dependency depending on your workspace :

• electron-app npm install --save <dependency>
• angular-app npm install --save <dependency> -w angular-app
• shared-lib npm install --save <dependency> -w shared-lib

Listing outdated dependencies

• electron-app npm run outdated-deps:electron-app
• angular-app npm run outdated-deps:angular-app
• shared-lib npm run outdated-deps:shared-lib
• all of them npm run outdated-deps

Updating dependencies

• electron-app npm run update-deps:electron-app
• angular-app npm run update-deps:angular-app
• shared-lib npm run update-deps:shared-lib
• all of them npm run update-deps

NB: Be sure your electron and spectron dependencies are matching according to this version mapping table.

Customizing app icons

# Install the icon generator globally
npm i -g electron-icon-maker

# Run following command from anywhere you have your input file (1024px at least) to generate platforms icons
electron-icon-maker --input=icon.png --output=./out

Rename and move files to match with next config

• ./workspaces/electron-app/main/assets/icons/icon.png for Linux
• ./workspaces/electron-app/main/assets/icons/icon.icns for MacOs
• ./workspaces/electron-app/main/assets/icons/icon.ico for Windows

Resources

Electron

• electronjs.org/docs - Electron's documentation
• electron/simple-samples - Small applications with ideas to take further
• electron/electron-api-demos - Sample app that teaches you how to use Electron

Angular

• angular.io/start - Getting started with Angular
• angular.io/docs - Angular's documentation
• cli.angular.io - Angular CLI documentation