Using Electron JS, we can convert our existing angular project into a desktop application very easily. In this post, we will create a sample Angular project and convert it into a Desktop application step by step.
Prerequisites:
- NPM Must be installed
Environment Setup:
- Install Angular CLI:
npm install -g @angular/cli
- Create a new Angular Project. Here our project name is “electron-sample“:
ng new electron-sample cd electron-sample
- Now run the project and open http://localhost:4200 to check whether the installation was successful or not.
ng serve -o
- Install Electron JS as a development dependency:
npm install electron --save-dev
- We also need a package called electron-packager. This package will bundle our app and produce the desktop app files. Install it globally:
npm install -g electron-packager
Example: In the root directory, create a file main.js that will be the entry point for the electron. Add the following code inside main.js:
Javascript
const { app, BrowserWindow } = require("electron"); const path = require("path"); const url = require("url"); let win; function createWindow() { win = new BrowserWindow({ width: 700, height: 700 }); // load the dist folder from Angular win.loadURL( url.format({ // compiled version of our app pathname: path.join(__dirname, '/dist/index.html'), protocol: "file:", slashes: true }) ); win.on("closed", () => { win = null; }); } app.on("ready", createWindow); // If you are using MACOS, we have to quit the app manually app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } }); |
In the above code, we have simply opened the complied version of our Angular app that is present in the dist/ directory. Note that we have provided the dist folder directly so that this code works on any application. But the file index.html lies in a subdirectory. Hence, in angular.json, change the value in outputPath key as follows.
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// Make changes in this line
"outputPath": "dist",
"index": "src/index.html",
....
This will save the compiled files into dist folder instead of a sub-directory. In src/index.html, change the line <base href=”/”> to <base href=”./”> as follows.
<head> <meta charset="utf-8"> <title>ElectronSample</title> <base href="./"> <!-- Change this line --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head>
Now in package.json, we have to add some commands for the development and testing of our app as well as to point to the starting point of the electron app. Add the following lines in package.json.
{
"name": "electron-sample",
"version": "0.0.0",
// This line will provide an entry
// point for the electron app
"main": "main.js",
"scripts": {
// Runs the app after compilation
"electron": "electron .",
// Compiles and runs the app
"electron-build": "ng build --prod && electron .",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
...
...
Now we can test the app by running it/
npm run electron-build
Note that we can run the commands directly if we had installed electron globally. You should see the below output :
Output:
For compiled app, we can run the app directly using
npm run electron
When we have created the final app, we can generate the compiled files that can be used directly on our system without installing the dependency. The electron-packager module helps us to build the binaries.
electron-packager . --platform=linux
Here we can choose our platform among darwin, Linux, Mac, and win32. Executing the above command will create a new folder with app and OS name. In this directory open the terminal:
sudo chmod +x electron-sample ./electron-sample
This will open the app, and you should see the following output:
Output:
