Developing Desktop Apps with Electron and Angular

236
SHARES
1.1k
VIEWS

In this tutorial we’ll learn how to develop desktop applications with Electron and Angular. Electron makes it easy to develop desktop applications for Windows, macOS and Linux using HTML, CSS and Javascript. But for today’s example we’ll use Angular with Electron to develop desktop apps.

What is Angular?

Angular is an awesome javaScript framework that makes it easy to build applications rich client side applications. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges.

What is Electron?

Electron is a popular framework that makes it easy to build desktop apps for macOS, Linux or Windows using familiar web technologies (HTML, JavaScript and CSS). Some very popular desktop apps, such as Visual Studio Code, Atom and Slack, are built using Electron. Behind the scenes Electron uses Chromium for the UI rendering and Node.js for filesystem access. Since Electron gives us a desktop shell for web apps, we can use any kind of front-end JavaScript framework to develop desktop apps.

Electron makes it easy to develop native desktop applications for Linux, macOS and Windows using web technologies. Electron uses Chromium(AGoogle’s open-source web browser project) and Node.js internally.

Some Popular Apps built with Electron:

  • Visual Studio Code
  • Slack
  • Atom
  • Skype
  • Etcher
  • and many more

Installation

First of all we need to set up our development environment before we start working on our App. We need to install Node.js® and npm if they are not already on your machine, you can verify that by running the following commands in your terminal:

$ node -v
$ npm -v

Setting up Angular

Angular by default comes with a CLI to make application development quicker and easier to maintain than if you did everything by hand. Angular CLI can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

$ npm install -g @angular/cli

The above command will install the angular cli globally. Now let’s create a new Angular Project.

$ ng new my-app

The above command will create a new directory called ‘my-app’. This folder will contain all the Angular project related files, you can use any name in place of my-app and that will become the name of your project. Now let’s cd into my-app folder and run the local development server.

$ cd my-app 
$ ng serve

This command will hopefully launch your default browser on http://localhost:4200/.

Installing Electron

Now we need Electron but first we need to install it. You can install Electron by running the command below:

$ npm i -D electron@latest

The above command will install the latest version of Electron as a dev dependency.

Electron Entry File

Let’s now create a main.js file in the root of our project’s directory. This file will be the entry point for our Electron app and will contain the main API for the desktop app:

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

let win;

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

  // load the dist folder from Angular
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );

  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()

  win.on("closed", () => {
    win = null;
  });
}

app.on("ready", createWindow);

// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// initialize the app's main window
app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

Note that the above is based on the official electron-quick-start project, with the main difference being that it correctly loads the entry point of our Angular app. You may want to stick to TypeScript and, if so, you’ll find the equivalent TypeScript quick start here.

Since you’ll be developing your Angular app using TypeScript, you can choose to work with TypeScript for the main Electron entry file too. Just add a tsc command for compiling it to JavaScript before launching the app. Like Below

"electron-tsc": "tsc main.ts && ng build --base-href ./ && electron ."

Further we need to update our package.json file so that it can look for our Electron file as the main entry point.

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "main.js", 
  ...

Let’s add an npm script that will build our Angular app and then launch the Electron app:

// just add this line in your scripts
   "electron": "ng build --base-href ./ && electron .",

Running our Electron App

Our Angular and Electron App is Ready.  You can start the app using the electron npm script we’ve created:

$ npm run electron

Now you should see a window appear with your Angular application. This guide should be enough to get you up and running. Stay tuned we’ll be covering more Electron and Angular topics soon.

Best resources to learn Angular, Firebase and ionic 4

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending