Getting Started with Angular and Electron

Published on June 14, 2018

Tyler Roberts

Getting Started with Angular and Electron

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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 and Slack, are built using Electron. Behind the scenes, Electron uses Chromium for 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.

In this short guide, we’ll create a new Angular application that we can launch on our desktop using Electron.


Open up your terminal and install the latest version of the Angular CLI globally:

  1. npm i -g @angular/cli

Navigate to your work folder and let’s create our new Angular app, called my-app:

  1. ng new my-app
  2. cd my-app
  3. npm i -D electron@latest

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

Setup and 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
      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") {

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.

A note about Electron and TypeScript

Since you’ll be developing your Angular app using TypeScript, you can certainly choose to work with TypeScript for the main Electron entry file too (main.ts). Note though that the main key in the project’s package.json should still point to the same main.js.

Just add a tsc command for compiling it to JavaScript before launching the app. Something like this should do the trick:

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

Next, update your project’s package.json file so that it can look for our Electron file as the main entry point.

  "name": "my-app",
  "version": "0.0.0",
  "main": "main.js", 

While we’re here, let’s add an npm script to build the Angular app and then launch the Electron app:


"scripts": {
   "electron": "ng build --base-href ./ && electron .",

The –base-href flag is important here to indicate to the Angular CLI that, in the index.html file, the base tag’s href attribute should have the value of ./.

Let’s remove the name from the output path of our Angular project, so that it reflects what we have in our main.js file:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",

In case you’re using a version of Angular prior to v6, you’ll instead want to make the change in your project’s angular-cli.json under an outDir key.

Running the App

Your app is now ready! You can start the app using the electron npm script we’ve created:

  1. npm run electron

And you should see a window appear with your Angular application contained within!

This should be enough to get you up and running. Stay tuned for a deeper dive into using the Electron API directly from our Angular app, as well as setting up Hot Module Reloading!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Tyler Roberts


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Thank you for the minimalistic template!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel