How to build an Electron app with Angular

Angular Electron

Introduction

I have shown you how to build an Angular app, how to turn it into a PWA and a mobile phone app. Now I will show you how to create a desktop app with Angular and Electron.

 

Prerequisites

  • Node
  • Angular
  • Electron

 

Sample Code

Download the source code from Github: https://github.com/ConsultDarryl/manchester-angular-workshop/tree/master/07-angular%2Belectron

 

Build a desktop app with Angular

Electron makes it easy to build cross-platform desktop apps with JavaScript, HTML, and CSS.

 

Clone the Electron “getting started” project:

git clone https://github.com/electron/electron-quick-start

 

Test the app by running:

npm start

 

Clone the Angular app:

git clone https://github.com/ConsultDarryl/manchester-angular-workshop.git

 

Build your Angular app:

cd manchester-angular-workshop\05-getting-started
ng build

 

Copy the dist folder to the Electron folder:

copy dist/getting-started electron-getting-started/dist

 

Modify the index.html. The app will load from the file system (rather than a web server) so change the href to:

<base href="./">

 

Modify main.js: Open the file main.js and change the line mainWindow… to:

mainWindow.loadFile('dist/index.html')

 

Test your app: Run the command:

npm start

 

Voila!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.