Create new project with Electron + Angular + Angular Material or simple Angular project
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
Setup as a starter template, you can easily generate a new GitHub repository. From the repository homepage, click the Use this template
button.
>> todo <<
- Electron
- Angular
- Angular material
- RxDB
- pouchdb-adapter-idb
- angular-web-worker
- custom-electron-titlebar
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.
>> todo <<
>> 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)).*$"
]
},
...
}
}
...
}
>> 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 { }
>> 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"
],
...
>> todo <<
$ npx asar extract app.asar ./out
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.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
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.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.