Desktop apps with Angular 4 & Electron

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 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.

Open up src/index.html and make the following change.

Now run the below command to install a package called electron-packager which would help us a lot in packaging a complete app.

Now open up package.json and add another script as shown below.

That’s it, simply run the below command to build our app.

Now run the below command to package the app.

This will create a folder with the name firstname in your project folder inside which the app will be present.

You can create and distribute for different platforms(mac/linux/windows) using electron-packager using the –platform option.

There, now you have a base onto which you can build your own desktop apps using Angular 4.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)

 

Liked it? Take a second to support admin on Patreon!
  • Athus Vieira

    Thanks for the great article! I got it working!

    What if I want to open a new window in live mode? Is it possible?

    • Yes sir, it’s possible.. I am doing a series on an entire app built using angular 4 + electron + firebase. Will be out soon. Thanks.

  • Ram Kumar Kushwaha

    Hi
    Thanks For Your Hard work and Grate Tutorial.
    I am facing a problem can you help me ?
    I Just downloaded the code from your github.
    And run the following command….
    1) npm install (Working Fine)
    2) npm install electron –save (Working Fine)
    3) ng build (Working Fine)
    4) ng serve (Working Fine)
    Giving output on Browser >> This is a angular web app running inside the desktop app.
    5) npm run electron (error)
    It’s showing the desktop window but showing the error in the console.
    And there is no output in the main window section.

    Thanks In Advance.