How to Build Native Cross-Platform Desktop Apps with Angular & Electron
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.
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 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
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.
- 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:
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.
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
- Electron installation Dev Env
Now let’s install Electron in the Angular app development environment.
npm install electron --save-dev
To install Electron globally, run:
npm install -g electron
The next step is to configure Electron. There are all sorts of possibilities for customization and we’re just scratching the surface.
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.
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
Do not confuse this with the index file in the
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:
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:
This other command will first run the Angular production build with ahead of time compilation and then run Electron:
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.
If you enjoyed this article, please give it a few claps for support.
You might also like “How to deploy an Angular App”