Web applications have taken the leap over desktop applications in recent years. There are many advantages in building the apps in the browser - no update hassle, softer system requirements, and better cost-efficiency.

‍Nevertheless, desktop applications have their own set of edges, one of the most important is the fact that you can run desktop app without access to the internet - unless you write a PWA (Progressive Web Application) type of web app, which can address some of the issues related to the lack of the internet connection. Shortly, desktop apps are nowhere close to dying as they're intensively popular to this day: Spotify, Zoom, Skype, Slack to name just a few.

Is it possible to write desktop apps with the use of the Web Development programming languages and frameworks you already know? You've learned all the tools required to build an application running in the browser: HTML, CSS, JS and most probably some of the modern frameworks like Angular, React or Vue. This article is just what you need, as we will show you how to use Angular and Electron Library together to create Desktop App, and web app as well. But first, let's cover the basics of Angular and Electron.

Angular

Angular is a framework created and maintained by Google used for building client applications in SPA Paradigm (Single Page Application). Angular uses Typescript (or Javascript when we are talking about AngularJS) to develop apps, which allows us to create typed systems.

But why do we actually need Angular in the first place? Complex apps are hard to develop and maintain by using Javascript and good-ol jQuery only. Angular helps us in structuring the system while giving us a handful of built-in tools and mechanisms to make development easier and faster. Main benefits of Angular:

• A clean structure of code, thus easy to understand, maintain and extend
• Built-in tools preventing us from reinventing the wheel - Routing, Dependency Injection, Refreshing on state change
• Ability to create reusable code
• Easier way to make the app testable

Angular has one of the dominant positions in the Web Development World with over 70 thousand stars on its official Github Repository at the time when this article is written. Some of the major tech players have been using using Angular as their go-to-solution for building client user interfaces including Google, Wix and PayPal.

Electron

Electron is a popular solution used for creating cross-platform desktop applications with the use of standard web development tools like HTML, CSS and Javascript. It is intended to work across various Operation System like Windows, macOS and Linux. It has been first released in 2013 and is currently maintained by GitHub. Project was first intended to be used as Github's internal text editor, but turned out to be a highly regarded tool with a number of impressive desktop apps created using it: Visual Studio Code, Docker, Facebook ... impressive, right?

But how does it really work? Well, let's go under the hood!

‍Electron works as a wrapper around a Chromium browser utilizing Google V8 Engine and NodeJs. The application written in Electron spans two independent threads:

• NodeJs Thread - this thread has access to NodeJS system libraries, for example operations within the file system
• Javascript Thread - running within the browser. The main process is responsible for handling the application logic. The main process can itself launch other renderer processes, which are rendering the windows and can handle events.

Both threads are able to communicate with each other via IPC (Inter Process Communication) protocol. The core of Electron has been written in C++ and Objective-C and is being shared to the application code via Javascript bindings. Electron gives us a native container wrapping web apps. With the access to the client's operating system it gives the feel of a true desktop app.

Finishing with all the technical buzzwords, let's create our first application with the use of Angular and Electron!

Create your first Angular & Electron Desktop App

Bootstrapping Angular Project

Let's start by creating our template Angular app to use in Electron. For this tutorial, it is assumed that you already have Node and NPM installed on your computer. If not, please refer to Google for instructions regarding installing those on your local machine. To verify whether you have Node and NPM installed you can type the following in terminal of your choice:

In case you have those installed, the terminal should return a version of tools. Now on to Angular! For this tutorial, we will be using Angular CLI tool, to make the development process easier.

Angular CLI makes it effortless to create an app that works right out of the box. It comes with set of built-in commands, like creating an app, running it, creating angular components, services and so on. To begin, install the Angular CLI on your computer.

The -g flag ensures that the package is installed globally, as opposed to installing a package for a given directory. Our next step will be creating an angular project. To make it happen, go to your chosen directory and type

The command might take a while, as it is creating a new workspace and an initial Angular application. Go grab yourself a cup of coffee! After a while, there will be a new first-angular-electron-app created inside your base directory. In the following steps we will go to the directory created by Angular CLI command, install the required packages specified in package.json file created by ng new and run the app. Type in following:

Running ng serve builds and serves the app, also coming with the feature of rebuilding app on any file changes. By default Angular starts on port 4200. Go to your favorite browser and paste localhost:4200 to see the results.

You must admit that it was super fast. But wait, the app has started in the browser and we are using the URL - wasn't it meant to be a Desktop App? This is the moment when Electron comes up on stage.

Installing Electron

We come to the point, when we need to install Electron as our App dependency. Doing this is really easy and all we have to do is type the following in your terminal:

The --save-dev is a flag, which is used to save the given package for development purposes.

Linking Angular and Electron

The next step is creating the main.js file. This file will serve as an entry-point for Electron and it is responsible for creating windows and handling all the system events that might occur in the app. Create the file in your app's root directory:

Then, open the content of the main.js file and paste the following code snippet:

You have to remember, that you have to specify the correct path to the index.html file, that can be found in dist folder (created by build command in the following step). In case you named your app different to first-angular-electron-app make sure to update pathname in main.js file.

Inside the index.html in the /src directory update the content from

 to

to make sure that JS files will be visible for Electron. The last step will be configuring the package.json to build the Angular App and correctly run the Electron.

Go to your root directory and find the package.json file. Open its content and add the following:

The modifications are specifying the main file for Electron. The electron command in scripts object is our bootstrap command for building the Angular App (the artifacts will be pushed into dist folder) and running the electron process. To run our Angular Desktop App type in your root directory:

Take another sip of your drink and after a while... boom!

This is it. Congratulations on building your first Desktop App with little help from Angular and Electron. Feel free to do some other modifications in the code and create your own Desktop App...

You may be interested in