VAT No.CHE-445.455.310 MWST
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 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.
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:
Finishing with all the technical buzzwords, let's create our first application with the use of Angular and Electron!
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.
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.
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 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...
Reach the automation level you are aiming for
Leverage no-code and write custom code where needed
Visualize your end-user experience all in one place
Make your deployment decisions easy