How to Build Native Cross-Platform Desktop Apps with Angular & Electron

Built cross-platform desktop apps with JavaScript, HTML and CSS

6 min readFeb 4, 2019

A couple of months ago I published ‘How to deploy an Angular app’ with GitHub. Another way of “deploying an angular app” is porting your existing Angular app to native desktop platforms.

So in this tutorial, we’ll learn how to build native desktop apps with Angular and Electron. Which can be packaged and built for installation on Windows 10, macOS, and Linux Ubuntu.

What is Angular?

Angular is a TypeScript-based open-source front-end web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

The Angular framework was initially released on September 14, 2016.

What is Electron?

Electron is an open-source framework developed and maintained by GitHub. Electron allows for the development of desktop GUI applications using front and back-end components originally developed for web applications: Node.js runtime for the backend and Chromium for the frontend. Electron framework can be used to build cross-platform desktop apps with frontend technologies like JavaScript, HTML, and CSS.

Electron Apps are cross-platform, meaning they compatible and run on Mac, Windows, and Linux operating system.

Electron framework was first released in August 2013 by GitHub. It has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docker. The followings are examples of applications that are built with Electron:

Atom, Visual Studio Code, Slack, Hyper, JIBO, and many other. (View More apps)

Assumptions & Requirements

Angular requirements: Install NodeJS and npm
Node.js and npm are fundamental to modern web development using Angular and other platforms.We’ll use the node package manager (npm) to install all the Angular, its libraries dependencies, and Electron. Get these right now if they’re not installed on your computer.

I’ll assume that you have already created an angular app or are currently working on one and are familiar with angular CLI. Most Angular code can be written with just the latest JavaScript, using types for dependency injection, and using decorators for metadata. The Angular CLI makes it easy to create an application that already works, right out of the box. If you don’t have it installed, I would highly recommend that you do.

Angular CLI installation

npm install -g @angular/cli

If you don’t have an angular project already built, you can simply create a demo project and follow along by running the command “ng new” followed by your application name. I decided to named mine “my-app-demo”, yours will have a different name. You can name it whatever you wish:

ng new my-angular-electron-app-demo

Once it’s created, change working directory to your app directory and run it to make sure everything is working correctly:

cd my-angular-electron-app-demo
ng serve --open

Ng “serve” follow by “ — open” flag will automatically launch and open the web browser. if you simply typed “ng serve” and once your app is up and running, visit the page http://localhost:4200 to make sure everything works fine.

Update index.html

The generated root page in Angular points the base href to / - this will cause problems with Electron, later on, so let’s update it now. Just add a period in front of the slash in src/index.html.

<base href=”./”>

Electron installation Dev Env

Now let’s install Electron in the Angular app development environment.

npm install electron --save-dev

Screenshot of Electron installation in Dev Env

To install Electron globally, run:

npm install -g electron

Configure Electron

The next step is to configure Electron. There are all sorts of possibilities for customization and we’re just scratching the surface.

main.js

Main.js is a JavaScript file where all the backend logic for an Electron app is handled. So the next step is creating a file named main.js in the root of your Angular project.

I recommend that you do some research on how to configure an Electron App to get a basic understanding and knowledge about how to set up main.js file.

Create a new file named main.js in the root of your project - this is the Electron NodeJS backend. This is the entry point for Electron and defines how our desktop app will react to various events performed via the desktop operating system.

The function: createWindow defines the properties of the program window that the user will see. There are many more window options that facilitate additional customization, child windows, modals, etc.

Notice we are loading the window by pointing it to the file: index.html in the dist/ folder.

Do not confuse this with the index file in the src/ folder.

At this point, this file does not exist, but it will be created automatically in the next step by running ng build --prod

For this tutorial, we are going to go with some basic configuration that should work just fine for all the platform. You can make the changes needed and personalize your main.js file to meet the requirement of your angular app.

The following is how my main.js file looks like:

Package.json

After you have set up configurations that define how your Electron App will look like; the next step is creating a custom command in the package.json file that will build the Electron app and angular with ahead of time compilation and then run Electron.

We’ll add the main.js file in package.json and create a custom command script inside the package.json file.

The following command will just run Electron:

“electron”: “electron .”

This other command will first run the Angular production build with ahead of time compilation and then run Electron:

“electron-build”: “ng build --prod && npm run electron .”

Now, let’s give it a try. From the command line, run:

npm run electron-build

After Angular has done building your production app, Electron will then pull up a window on your operating system.

Mine looks like this:

Now you can continue creating your angular app and package it for execution on various operating systems.

Packaging for Desktop OS

After you are done building your app and it’s for desktops, you need to package and distribute it. The electron packager tool will allow packaging our code into an executable for desktop platforms — including Windows (win32), MacOS (Darwin), and Linux. Keep in mind, there are several other electron packaging tools that might better fit your needs.

npm install electron-packager -g
npm install electron-packager — save-dev

Linux and MacOS developers will need to install WineHQ if they plan on building desktop apps for Windows.

Let’s try to build an executable for Windows:

electron-packager . — platform=win32

This will generate a directory /angular-electron-win32-x64/ that contains the executable file.

And for MacOS while we’re at it:

electron-packager . — platform=darwin

This will generate a directory /angular-electron-darwin-x64/ that contains the app. Zip it and extract it on a mac system and you should be able to run it natively. You will get warnings that it’s from an unknown developer, but this is expected and it’s perfectly safe to open - it’s your own code after all.

This tutorial was initially posted by Jeff Delaney (Build Angular Desktop Apps With Electron). An advanced version with sample code can also be found at my Github page (angular-electron).