Based on Jeff Delaney post. You can also check the video lesson on youtube and the original source code on github.
You can also find my source code on github.
Generate the angular app
You can follow the Angular – QuickStart or just do these steps:
npm install -g @angular/cli ng new angular-electron cd angular-electron
Update base tag on index.html
The generated root page in Angular points the base href to / – this will cause problems with Electron later on, so let’s update it now.
<base href="./">
Install Electron
npm install electron --save-dev
Configure Electron
Create a new file named main.js in the root of your project – this is the Electron NodeJS backend. This is the entry point for Electron and defines how our desktop app will react to various events performed via the desktop operating system.
const { app, BrowserWindow } = require('electron') let win; function createWindow () { // Create the browser window. win = new BrowserWindow({ width: 600, height: 600, backgroundColor: '#ffffff', icon: `file://${__dirname}/dist/assets/logo.png` }) win.loadURL(`file://${__dirname}/dist/index.html`) //// uncomment below to open the DevTools. // win.webContents.openDevTools() // Event when the window is closed. win.on('closed', function () { win = null }) } // Create window on electron intialization app.on('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', function () { // On macOS specific close process if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { // macOS specific close process if (win === null) { createWindow() } })
The createWindow function defines the properties of the program window that the user will see.
Notice we are loading the window by pointing it to the index.html file in the dist/ folder. Do NOT confuse this with the index file in the src/ folder. At this point, this file does not exist, but it will be created automatically in the next step by running ng build –prod
Custom Build Command
The deployed desktop app will be an Angular AOT build – this happens by default when you run ng build –prod. It’s useful to have a command that will run an AOT production build and start Electron at the same time. This can be easily configured in the package.json file.
{ "name": "angular-electron", "version": "0.0.0", "license": "MIT", "main": "main.js", // <-- add this "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "electron": "electron .", // <-- add this to run electron "electron-build": "ng build --prod && electron ." // <-- add this to build app in prod with AOT and then run electron }, // ...omitted }
Run the electron app
You can run your angular app as an native desktop app with the following command.
npm run electron-build
At this point, you can run the command (it will take a few seconds) and it will create the dist/ folder and will automatically bring up a window on your operating system with default Angular app.
This setup does not support hot code reloads. Whenever you change some Angular code, you need to rerun the electron-build command. It is possible to setup hot reloads by pointing the window to a remote URL (such as https://localhost:4200) and running npm start in a separate terminal and then running npm run electron.
Build you Angular App
This section is up to you, if you want something ready, check the Jeff’s post.
Packaging for Desktop Operating Systems
This section is slightly different from the original post, because I had to add –no-prune and a series of –ignore to let electron-packager works as expected.
The electron packager tool will allow to package our code into an executable for desktop platforms – including Windows (win32), MacOS (darwin), and Linux. Keep in mind, there are several other electron packaging tools that might better fit your needs.
npm install electron-packager -g npm install electron-packager --save-dev
Build an executable for Windows:
electron-packager . --platform=win32 --no-prune --ignore=/node_modules --ignore=/e2e --ignore=/src
Build an executable for MaxOS:
electron-packager . --platform=darwin --no-prune --ignore=/node_modules --ignore=/e2e --ignore=/src
The you can add an npm script electron-package-win to easy package for Windows:
{
"name": "angular-electron",
"version": "0.0.0",
"license": "MIT",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron .",
"electron-package-win": "ng build --prod && electron-packager . --no-prune --ignore=/node_modules --ignore=/e2e --ignore=/src --overwrite" // <-- add this script
}
// ...omitted
}
Then call it like this:
npm run electron-package-win