Now that you have an Angular project scaffold, let's integrate it with the Electron shell:
- Open the project in Visual Studio Code. You can do that from the Terminal using the following command:
code .
First, though it's not mandatory, let's change the application's title.
- Open the src/index.html file and change the content of the title tag to Angular with Electron, or any title of your choice:
<title>Angular with Electron</title>
- Now, we need to update the base application path to ./:
<base href="./" />
This makes all resources relative to the index.html file. This is what we need when we're running an Angular application from within the Electron shell.
- This results in the following output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular with Electron</title>
<base href="./" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>
- Switch to the Command Prompt or a Terminal window. We need to install the electron library into the project. You can do this with the following command:
npm i electron -D
- We need to provide a main.js file and register it with the package.json file so that it acts as the main entry point for the Electron shell that will be loaded upon startup. Every time Electron starts, it checks for the entry and uses that file.
- Open the package.json file so that you can edit it. Update it so that the code looks as follows:
{
"name": "integrate-angular",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
}
- Now, create a main.js file in the project root folder and add the following content to it:
const { app, BrowserWindow } = require('electron');
let win;
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadFile('index.html');
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
The preceding code is a minimal implementation of an Electron window. We are going to use similar snippets throughout this book.
- The first thing that we need to change in the main.js code is where we can find the index.html file. If we compile an Angular project in production mode, we'll get the final application artifacts in the dist subfolder. Change the win.loadURL call to reflect that:
win.loadURL(`file://${__dirname}/dist/index.html`)
For experienced developers, if you have multiple projects in the workspace, you may also need to specify the project folder name within the output, as follows globally:
win.loadURL(`file://${__dirname}/dist/integrate-angular/index.html`);
- Before we finish the configuration, switch back to the package.json file and rename the start script to serve. Then, add a new start script entry to invoke the Electron application:
{
"name": "integrate-angular",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"serve": "ng serve",
"start": "electron .",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
}
- Launch the Terminal window in VS Code, or use any other Command Prompt tool, and execute the following scripts:
npm run build
npm start
The first command builds the application in production mode. This provides you with a dist folder that contains optimized scripts, styles, and HTML files. The second command launches an Electron shell with your application inside it so that you can test or debug your features.
- The application window should look as follows:
Now, the project is ready to be worked on. However, as you may have noticed, to test a change in the code or user interface, you have to perform the following actions:
- Stop the Electron app.
- Stop the running web server.
- Change the code.
- Start the web server.
- Start the Electron app.
Let's learn how to improve our setup so that we can automatically rebuild and reload the application when code changes are made.