To configure the Electron Shell's integration, we need to make a few changes to the project files. Let's get started:
- Update the src/index.html file so that it contains the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ChatApp</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>
- Install the Electron library with the following command:
npm i electron -D
- Update the package.json file:
{
"name": "chat-app",
"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"
},
// other content
We are going to use the npm run serve command to run the Angular application and npm run start or npm start to launch the Electron application.
More details about script configuration are provided in Chapter 3, Integrating with Angular, React, and Vue. Make sure that you check out the examples regarding how to set up production builds.
- Put the main.js file, along with the following code, into the project's root folder:
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
resizable: false
});
win.loadURL(`http://localhost:4200`);
}
app.on('ready', createWindow);
- Run the following commands in two separate console instances:
# first console
npm run serve
# second console
npm start
- As a result, you should see the window of the application, as shown in the following screenshot:
The bare application scaffold is ready. Now, it's time to create a new Firebase account.