Build a Desktop Application with Electron and Angular

Build a Desktop Application with Electron and Angular

In this tutorial, we’ve looked at how to run a web application built with Angular as a desktop application using Electron. We hope you’ve learned how easy it can be to get started building desktop apps with your web development toolkit!

In this tutorial we’ll build a cross-platform desktop application with Electron and web technologies such as TypeScript and Angular.

Electron.js is a popular platform for building cross-platform desktop apps for Windows, Linux and macOS with JavaScript, HTML, and CSS. It’s created and maintained by GitHub and it’s available under the MIT permissive license. It was initially created for GitHub’s Atom editor, but has since been used to create applications by companies like Microsoft (Visual Studio Code), Facebook, Slack, and Docker.

Electron makes use of powerful platforms like Google Chromium and Node.js, but also provides its own set of rich APIs for interacting with the underlying operating system.

Electron provides a native container that wraps web apps so they look and feel like desktop apps with access to operating system features (similar to Cordova for mobile apps). This means we can use any JavaScript library or framework to build our application. In this tutorial, we’ll be using Angular.

Prerequisites

For this tutorial, you will need to have these prerequisites covered:

  • Familiarity with TypeScript and Angular.
  • Node.js and npm installed on your development machine.
Installing Angular CLI

Let’s get started by installing Angular CLI, which is the official tool for creating and working with Angular projects. Open a new terminal and run the following command:

npm install -g @angular/cli

We’ll install the Angular CLI globally on our system. If the command fails with the EACCESS error, add sudo before your command in Linux or macOS, or run the command prompt as an administrator in Windows.

If the CLI is installed successfully, navigate to your working directory and create a new Angular project using the following commands:

cd ~
ng new electron-angular-demo

Wait for your project’s files to be generated and dependencies to be installed from npm. Next, navigate to the root of your project and run the following command to install the latest version of Electron from npm as a development dependency:

npm install --save-dev [email protected]

As of this writing, this command will install Electron v4.1.4.

Next, create a main.js file and add the following code:

    const {app, BrowserWindow} = require('electron')
    const url = require("url");
    const path = require("path");

    let mainWindow

    function createWindow () {
      mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })

      mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, `/dist/index.html`),
          protocol: "file:",
          slashes: true
        })
      );
      // Open the DevTools.
      mainWindow.webContents.openDevTools()

      mainWindow.on('closed', function () {
        mainWindow = null
      })
    }

    app.on('ready', createWindow)

    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit()
    })

    app.on('activate', function () {
      if (mainWindow === null) createWindow()
    })

This code simply creates a GUI window and loads the index.html file that should be available under the dist folder after we build our Angular application. This example code is adapted from the official starter repository.

Next, open the package.json file of your project and add the main key to set the main.js file as the main entry point:

    {
      "name": "electron-angular-demo",
      "version": "0.0.0",
      "main": "main.js",
      // [...]
    }

Next, we need to add a script to easily start the Electron app after building the Angular project:

    {
      "name": "electron-angular-demo",
      "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",
        "start:electron": "ng build --base-href ./ && electron ."
      }, 
      // [...]
    }

We added the start:electron script which runs the ng build --base-href ./ && electron . command:

  • Familiarity with TypeScript and Angular.
  • Node.js and npm installed on your development machine.

Now, in your terminal, run the following command:

npm run start:electron

An Electron GUI window will be opened, but will be blank. In the console, you’ll see the Not allowed to load local resource: /electron-angular-demo/dist/index.html error.

Electron is unable to load the file from the dist folder because it simply doesn’t exist. If you look in your project’s folder, you’ll see that Angular CLI builds your app in the dist/electron-angular-demo folder instead of just the dist folder.

In our main.js file, we are telling Electron to look for the index.html file in the dist folder without a subfolder:

       mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, `/dist/index.html`),
          protocol: "file:",
          slashes: true
        })
      );

__dirname refers to the current folder from which we’re running Electron.

We use the path.join() method to join the path of the current folder with the /dist/index.html path.

You can either change the second part of the path to /dist/electron-angular-demo/index.html or, better yet, change the Angular configuration to output the files in the dist folder without using a subfolder.

Open the angular.json file, locate the projects → architect → build → options → outputPath key and change its value from dist/electron-angular-demo to just dist:

      "projects": {
        "electron-angular-demo": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "prefix": "app",
          "schematics": {},
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist", 

Head back to your terminal and again run the following command:

npm run start:electron

The script will call the ng build command to build the Angular app in the dist folder, and call electron from the current folder to start the Electron window with the Angular app loaded.

This is a screenshot of our desktop app running Angular:

Calling Electron APIs from Angular

Let’s now see how we can call Electron APIs from Angular.

Electron apps make use of a main process running Node.js and a renderer process running the Chromium browser. We can’t directly access all of Electron’s APIs from the Angular app.

We need to make use of IPC or Inter-Process Communication, which is a mechanism provided by operating systems to allow communication between different processes.

Not all Electron APIs need to be accessed from the main process. Some APIs can be accessed from the renderer process, and some APIs can be accessed from both the main and renderer processes.

BrowserWindow, which is used to create and control browser windows, is only available in the main process. The desktopCapturer API (used for capturing audio and video from the desktop using the navigator.mediaDevices.getUserMedia API) is only available in the renderer process. Meanwhile the clipboard API (for performing copy and paste operations on the system clipboard) is available on both the main and renderer processes.

You can see the complete list of APIs from the official docs.

Let’s see an example of calling the BrowserWindow API, available only in the main process, from the Angular app.

Open the main.js file and import ipcMain:

    const {app, BrowserWindow, ipcMain} = require('electron')

Next, define the openModal() function:

    function openModal(){
      const { BrowserWindow } = require('electron');
      let modal = new BrowserWindow({ parent: mainWindow, modal: true, show: false })
      modal.loadURL('https://www.sitepoint.com')
      modal.once('ready-to-show', () => {
        modal.show()
      })
    }

This method will create a child modal window, load the [https://www.sitepoint.com](https://www.sitepoint.com "https://www.sitepoint.com") URL inside it, and display it when it’s ready.

Next, listen for an openModal message that will be sent from the renderer process and call the openModal() function when the message is received:

    ipcMain.on('openModal', (event, arg) => {
      openModal()
    })

Now, open the src/app/app.component.ts file and add the following import:

import { IpcRenderer } from 'electron';

Next, define an ipc variable and call require('electron').ipcRenderer to import ipcRenderer in your Angular component:

      private ipc: IpcRenderer
      constructor(){
        if ((<any>window).require) {
          try {
            this.ipc = (<any>window).require('electron').ipcRenderer;
          } catch (e) {
            throw e;
          }
        } else {
          console.warn('App not running inside Electron!');
        }
      }

The require() method is injected at runtime in the renderer process by Electron and as such, it will only be available when running your web application in Electron.

Finally, add the following openModal() method:

      openModal(){
        console.log("Open a modal");
        this.ipc.send("openModal");
      }

We use the send() method of ipcRenderer to send an openModal message to the main process.

Open the src/app/app.component.html file and add a button, then bind it to the openModal() method:

    <button (click)="openModal()">
      Open Modal
    </button>

Now, run your desktop app using the following command:

npm run start:electron

This is a screenshot of the main window with a button:

You can find the source code of this demo from this GitHub repository.

Conclusion

In this tutorial, we’ve looked at how to run a web application built with Angular as a desktop application using Electron. We hope you’ve learned how easy it can be to get started building desktop apps with your web development toolkit!

Recommended Reading

How to Show Image Preview with Reactive Forms in Angular 8

How to create a simple web application with Java 8, Spring Boot and Angular

How to send HTTP GET requests from Angular to a backend API

Learn Angular 8 by creating a simple Full Stack Web App

Angular 8 for Beginners Course (includes FREE E-Book)

Angular 8 (formerly Angular 2) - The Complete Guide

Complete Angular 8 from Zero to Hero | Get Hired

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

What are the best alternatives for angular js?

<img src="https://moriohcdn.b-cdn.net/193902114c.png">There are numerous frameworks and libraries used across the globe. If not angular, there are platforms like React, Vue, Aurelia and so on for app development.

There are numerous frameworks and libraries used across the globe. If not angular, there are platforms like React, Vue, Aurelia and so on for app development.

Angular 8 Node & Express JS File Upload

Angular 8 Node & Express JS File Upload

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

We are also going to take the help of Node.js to create the backend server for Image or File uploading demo. Initially, we’ll set up an Angular 8 web app from scratch using Angular CLI. You must have Node.js and Angular CLI installed in your system.

We’ll create the local server using Node.js and multer middleware. Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. Once we are done setting up front-end and backend for our File uploading demo then, we’ll understand step by step how to configure file uploading in Angular 8 app using Node server.

Prerequisite

In order to show you Angular 8 File upload demo, you must have Node.js and Angular CLI installed in your system. If not then check out this tutorial: Set up Node JS

Run following command to install Angular CLI:

npm install @angular/cli -g

Install Angular 8 App

Run command to install Angular 8 project:

ng new angular-node-file-upload

# ? Would you like to add Angular routing? No
# ? Which stylesheet format would you like to use? CSS
cd angular-node-file-upload

Show Alert Messages When File Uploaded

We are going to install and configure ngx-toastr an NPM package which helps in showing the alert message when the file is uploaded on the node server.

npm install ngx-toastr --save

The ngx-toastr NPM module requires @angular/animations dependency:

npm install @angular/animations --save

Then, add the ngx-toastr CSS in angular.json file:

"styles": [
    "src/styles.css",
    "node_modules/ngx-toastr/toastr.css"
]

Import BrowserAnimationsModule and ToastrModule in app.module.ts file:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
 
@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added
  ]
})

export class AppModule { }

Install & Configure ng-file-upload Directive

In this step, we’ll Install and configure ng-file-upload library in Angular 8 app. Run command to install ng-file-upload library.

npm install ng2-file-upload

Once the ng2-file-upload directive is installed, then import the FileSelectDirective and FormsModule in app.module.ts. We need FormsModule service so that we can create the file uploading component in Angular.

import { FileSelectDirective } from 'ng2-file-upload';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    FileSelectDirective
  ],
  imports: [
    FormsModule
  ]
})

export class AppModule { }

Setting Up Node Backend for File Upload Demo

To upload the file on the server, we need to set up a separate backend. In this tutorial, we will be using Node & Express js to create server locally along with multer, express js, body-parser, and dotenv libraries.

Run command to create backend folder in Angular app’s root directory:

mkdir backend && cd backend

In the next step, create a specific package.json file.

npm init

Run command to install required dependencies:

npm install express cors body-parser multer dotenv --save

In order to get rid from starting the server again and again, install nodemon NPM package. Use –-save-dev along with the npm command to register in the devDependencies array. It will make it available for development purpose only.

npm install nodemon --save-dev

Have a look at final pacakge.json file for file upload demo backend:

{
  "name": "angular-node-file-upload",
  "version": "1.0.0",
  "description": "Angualr 8 file upload demo app",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "Digamber Rawat",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.0.0",
    "express": "^4.17.1",
    "multer": "^1.4.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

Create a file by the name of server.js inside backend folder:

Configure Server.js

To configure our backend we need to create a server.js file. In this file we’ll keep our backend server’s settings.

touch server.js

Now, paste the following code in backend > server.js file:

const express = require('express'),
  path = require('path'),
  cors = require('cors'),
  multer = require('multer'),
  bodyParser = require('body-parser');

// File upload settings  
const PATH = './uploads';

let storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, PATH);
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now())
  }
});

let upload = multer({
  storage: storage
});

// Express settings
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

app.get('/api', function (req, res) {
  res.end('File catcher');
});

// POST File
app.post('/api/upload', upload.single('image'), function (req, res) {
  if (!req.file) {
    console.log("No file is available!");
    return res.send({
      success: false
    });

  } else {
    console.log('File is available!');
    return res.send({
      success: true
    })
  }
});

// Create PORT
const PORT = process.env.PORT || 8080;
const server = app.listen(PORT, () => {
  console.log('Connected to port ' + PORT)
})

// Find 404 and hand over to error handler
app.use((req, res, next) => {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  console.error(err.message);
  if (!err.statusCode) err.statusCode = 500;
  res.status(err.statusCode).send(err.message);
});

Now, while staying in the backend folder run the below command to start the backend server:

nodemon server.js

If everything goes fine then you’ll get the following output:

[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
Connected to port 8080

Create Angular 8 File Upload Component

In this last step, we are going to create a file upload component in Angular 8 app using Express js API.

Get into the app.component.ts file and include the following code:

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { ToastrService } from 'ngx-toastr';

const URL = 'http://localhost:8080/api/upload';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({
    url: URL,
    itemAlias: 'image'
  });

  constructor(private toastr: ToastrService) { }

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
    this.uploader.onCompleteItem = (item: any, status: any) => {
      console.log('Uploaded File Details:', item);
      this.toastr.success('File successfully uploaded!');
    };
  }

}

Go to app.component.html file and add the given below code:

<div class="wrapper">
  <h2>Angular Image Upload Demo</h2>

  <div class="file-upload">
    <input type="file" name="image" ng2FileSelect [uploader]="uploader" accept="image/x-png,image/gif,image/jpeg" />
    <button type="button" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
      Upload
    </button>
  </div>

</div>

Now, It’s time to start the Angular 8 app to check out the File upload demo in the browser. Run the following command:

ng serve --open

Make sure your NODE server must be running to manage the backend.

When you upload the image from front-end you’ll see your image files are saving inside the backend > uploads folder.

Conclusion

In this Angular 8 tutorial, we barely scratched the surface related to file uploading in a Node application. There are various other methods available on the internet through which you can achieve file uploading task quickly. However, this tutorial is suitable for beginners developers. I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

Angular JS Development Company

If you’re finding AngularJS Development Company for consultation or Development, your search ends here at Data EximIT 

🔗 Click here to know more: AngularJS Development