/electron-angular-quick-start

An Electron and Angular Quick-starter

Primary LanguageTypeScriptMIT LicenseMIT

CI Status Maintenance Status License MIT PRs Welcome Tweet Watch on GitHub Star on GitHub

Electron Angular Quick Start

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 17 version with required dependencies for Electron 27.
  • This project is also written in Typescript 4/5 and includes test samples (WebdriverIO and Jasmine).
  • 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 :

Then from your command line:

# 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:angular Run angular unit tests
npm run test:angular-e2e Run angular end-to-end tests
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

Behind a proxy

After settings HTTP_PROXY and HTTPS_PROXY environment variables :

# Install dependencies
npx cross-env ELECTRON_GET_USE_PROXY=true GLOBAL_AGENT_HTTPS_PROXY=%HTTPS_PROXY% npm install

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

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

Angular