Skip to content
Related Articles

Related Articles

How to convert angular 4 application to desktop application using electron ?
  • Difficulty Level : Expert
  • Last Updated : 17 Mar, 2021

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:

main.js




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 verion 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 manully 
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 platfrom 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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :