Developing Cross-platform Desktop Apps with Angular and Electron

Angular is a popular front-end framework used for building web applications, but did you know that you can also use it to build cross-platform desktop applications? By combining Angular with the Electron framework, you can create desktop applications that work across Windows, macOS, and Linux operating systems. In this article, we’ll explore how to use Angular and Electron to build cross-platform desktop applications.

1. What is Electron?

Electron is an open-source framework for building desktop applications with web technologies such as HTML, CSS, and JavaScript. It was originally created by GitHub to build their Atom text editor, but has since been used to build a variety of applications such as Slack, Discord, and Visual Studio Code. Electron is built on top of Chromium, the open-source project behind Google Chrome, and Node.js, a server-side JavaScript runtime environment.

2. Setting up an Angular-Electron project

To get started with building an Angular-Electron project, you’ll need to set up a new Angular project and install the Electron dependencies. Here’s a step-by-step guide:

• Create a new Angular project using the Angular CLI:

ng new my-electron-app

• Navigate to the project directory and install the Electron dependencies:

cd my-electron-app
npm install –save-dev electron

• Create a new main.js file in the src directory with the following code:

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

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'dist', 'index.html'),
      protocol: 'file:',
      slashes: true
    })
  );

  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();
  }
});

This code sets up a new Electron application and creates a new window that loads the Angular application.

• Update the package.json file to include the start and build commands:

“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build –prod && electron .”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
}

3. Building the Angular-Electron application

To build the Angular-Electron application, you’ll need to run the build command that we added to the package.json file:

npm run build

This command will build the Angular application and create a production-ready version of the application in the dist directory. It will then start the Electron application and load the Angular application.

4. Adding platform-specific features

One of the benefits of using Electron is that it allows you to add platform-specific features to your application. For example, you can use the node-notifier package to display desktop notifications on macOS and Windows, but use the node-pty package to spawn interactive shells on Linux.

Here’s an example of how to use the node-notifier package to display a desktop notification:

const notifier = require(‘node-notifier’);

notifier.notify({
title: ‘My Electron App’,
message: ‘Hello, World!’
});

This code will display a desktop notification with the title “My Electron App” and the message “Hello, World!”.

5. Distributing the application

Once you’ve built your Angular-Electron application, you’ll need to distribute it to your users. Electron provides several ways to package and distribute your application, including:

• Electron Forge: a complete toolchain for building and publishing Electron applications.
• Electron Builder: a command-line tool for building and packaging Electron applications.
• Electron Packager: a command-line tool for packaging Electron applications for distribution.

You can choose the tool that best fits your needs and follow the instructions for packaging and distributing your application.

Conclusion

In this article, we explored how to use Angular and Electron to build cross-platform desktop applications. We covered the basics of setting up an Angular-Electron project, building the application, adding platform-specific features, and distributing the application. By using Angular and Electron together, you can create powerful desktop applications that work across multiple operating systems.