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.

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 Git, Node.js and Angular-CLI installed on your computer. And then from your command line:

# First, 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

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