angular-electron-boilerplate: An HTML repository from tfSheol

Electron Angular Material project boilerplate

Create new project with Electron + Angular + Angular Material or simple Angular project

About

tfSheol/angular-electron-boilerplate is a GitHub template repository for creating a new Electron app with Angular & Angular Material, maintained by @tfSheol.

// Versions

# Angular    11.2.1
# Material   11.2.1
# Electron   11.2.3
# RxDB       9.14.0
# Node       12.18.3
# Chromium   87.0.4280.141

Repo template

Setup as a starter template, you can easily generate a new GitHub repository. From the repository homepage, click the Use this template button.

What's included

>> todo <<

Usage

Be sure to have Node.js installed before proceeding.

# Clone the repo
git clone https://github.com/tfSheol/angular-electron-boilerplate.git
cd angular-electron-boilerplate

# Install dependencies
npm install

# Start a local server (uses serve)
npm run start

npm run build
npm run build:prod

npm run start:electron

npm run build:dev:electron
npm run build:prod:electron

npm run make:linux
npm run make:mac
npm run make:win32

For the developpement you can use npm run start and open http://localhost:3000 to see the page in action.

Scripts

>> todo <<

Generate electron app with latest Angular version (from scratch or use this repo)

>> todo <<

First update your angular cli to latest version ! Or juste intall it.

$ npm install @angular/cli -g

$ ng new electron-boilerplate
$ cd electron-boilerplate
$ npm install electron@latest --save-dev

// package.json

{
  "name": "electron-boilerplate",
  ...
  "main": "app.js",
  "scripts": {
    ...
    "start:electron": "ng build --base-href ./ && electron ."
  }
  ...
}

// app.js

const { app, BrowserWindow } = require('electron')

function initWindow() {
    let appWindow = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
            nodeIntegration: true
        }
    });

    appWindow.loadURL(`file://${__dirname}/dist/index.html`);

    appWindow.webContents.openDevTools();

    appWindow.on('closed', function () {
        appWindow = null;
    });
}

app.on('ready', initWindow);

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', function () {
    if (win === null) {
        initWindow();
    }
});

Check install with $ npm run start:electron

$ npx @electron-forge/cli@latest import

// package.json
}
  ...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --prod",
    "build:prod:electron": "ng build --base-href ./ --prod",
    "build:dev:electron": "ng build --base-href ./ --source-map=false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron .",
    "package": "electron-forge package --arch=x64 --platform=darwin,linux,win32",
    "make": "electron-forge make",
    "make:mac": "electron-forge make --arch=x64 --plateform darwin",
    "make:linux": "electron-forge make --arch=x64 --plateform linux",
    "make:win32": "electron-forge make --arch=x64 --platform=win32"
  },
  ...
  "config": {
    "forge": {
      "packagerConfig": {
        "asar": true,
        "ignore": [
          "^/(?!(dist|app.js|package.json)).*$"
        ]
      },
      ...
    }
  }
  ...
}

Web worker

>> todo <<

$ cd src/app/worker
$ ng g angular-web-worker:angular-web-worker

// app.module.ts

import { WorkerModule } from 'angular-web-worker/angular';
import { AppWorker } from './app.worker';

@NgModule({
  ...
  imports: [
    ...,
    WorkerModule.forWorkers([
       {worker: AppWorker, initFn: () => new Worker('./app.worker.ts', {type: 'module'})},
    ]),
    ...
  ],
})
export class AppModule { }

RxDB

>> todo <<

// angular.json

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "allowedCommonJsDependencies": [
        "deep-equal", "object-path", "@babel/runtime/helpers/wrapNativeSuper",
        "@babel/runtime/helpers/inheritsLoose", "@babel/runtime/regenerator",
        "immediate", "object-path"
      ],
      ...

Other stuff

>> todo <<

Extract content of asar file

$ npx asar extract app.asar ./out

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.