Sharing Top Content from the Angular-sphere.

Desktop apps with Angular 4 & Electron

  • In this post we’ll see how to create a desktop app using Angular 2 and Electron.
  • I am just showing you the way to turn an angular 2 app into a desktop app.
  • Now open up main.js and modify the code as shown below: – – Now this will load the index.html file from our dist directory instead of loading it from a localhost or in other words from a webserver.
  • Now run the below command to install a package called electron-packager which would help us a lot in packaging a complete app.
  • There, now you have a base onto which you can build your own desktop apps using Angular 4.

Hope you are all well. In this post we’ll see how to create a desktop app using Angular 2 and Electron. This is an update to the existing post on how to do the same which I wrote a year back.

Hi Friends,

Hope you are all well. In this post we’ll see how to create a desktop app using Angular 2 and Electron. This is an update to the existing post on how to do the same which I wrote a year back.

Let’s get started.

Code for this post can be found – here. (Leave a star if you liked the repo. Thanks)

First let’s scaffold out a new angular application using the below command.

Now get into the project folder and install electron using the below command.

Create a file called main.js in the root directory of your project and add the below code into it.

This will simply open the particular URL in a new desktop window.

Open package.json and add a new script under scripts as shown below.

Now open a terminal and run this project using

Open another terminal and run the below command.

Now you would see that the App screen is being loaded onto the desktop app.

Great, wait., This is a desktop app right ? So will it always be dependent on a webserver, if yes., then how would I distribute it to other people ?

Relax, we are not done yet. I am just showing you the way to turn an angular 2 app into a desktop app.

Now open up main.js and…

Desktop apps with Angular 4 & Electron

Comments are closed, but trackbacks and pingbacks are open.