Build Desktop apps with the power of Angular

Electron and Angular

If you can build a website, you can build a desktop app.

That’s true if you know how to write Javascript code, you can build a desktop application that looks and behaves like the native one. not just that, you also can bring the power of Angular into the world of desktop apps to make your IU looks stunning 😍, enough talking, go get yourself a cup of coffee and let’s get started.

What are we going to do?!!

We’re going to build a basic desktop application using Electron and Angular.

Before we start I expect that you have some basic knowledge of NodeJs and Angular.

Set up Angular

If you don’t have Angular cli installed already, run the following command to install it.

$ npm install -g @angular/cli

Now let’s start a new Angular application.

$ ng new angular-electron

It’ll ask you about the styles compiler you want to use and if you want to use the Angular router and so on, this configuration doesn’t matter at all select whatever you want.

You can see your application now in action by running…

$ cd angular-electron
$ ng serve

Then open your browser at http://localhost:4200/, anyway that’s not the funniest part, let’s move forward.

We need to modify the index.html file at the src folder of our project, add a period to the base tag, so our app can find the static files, don’t skip this step it’s very important.

<base href="./">

Set up Electron

Now we going to add Electron to our application.

$ npm install --save-dev electron

And we’ll also need some dependencies.

$ npm install --save-dev app-root-path

Now let’s create a new folder for our Electron application.

$ mkdir bin && cd bin && touch main.ts

As you can see we created bin folder with a main.ts file in it, and the reason we created the main file with ts extension and not js is that we already using Typescript for the Angular application, so why not use Typescript for the entire project?!!

Now let’s add some code to our main.ts file (lastly we writing some code 😅)

The code above is exactly the same as mentioned at the official website but in Typescript syntax, also note that the win.loadFile function linking to the entry file of the Angular application “we didn’t build it yet”.

Okay, we need to check if what we are doing is even working, right!!

Let’s add a script to our package.json file so we can build and run this application.

"main" : "bin/main.js",
"scripts": {
 ...
   “electron”: “tsc bin/main.ts && ng build && electron bin/main.js”
}

And now let’s see it in action.

$ npm run electron

For now, you should see the application up and running with the angular logo in it, so far so good 😉.

Okay, now we have our application running, but who could we use the Electron API within the Angular application itself?!!

Don’t panic it’s as easy as running…

$ npm install --save-dev ngx-electron

Access Electron API from within the Angular application.

We just installed ngx-electron which going to make our life a lot easier, so let’s see how to use it.

We need to import this module like any other module we used to use with Angular inside app.module.ts file.

import { NgxElectronModule } from 'ngx-electron';
@NgModule({
imports: [
  ...
  NgxElectronModule
]
})
export class AppModule {}

That’s it now we can use it in our components like…

import { ElectronService } from 'ngx-electron';
export class AppComponent {
   constructor(private _electronService: ElectronService) {
   // now we have access to electron api through this service
   }
}

Let’s see if we really have access to Electron API.

Replace the content of your app.component.ts file with the following.

And replace the content of the app.component.html file with the following

So, what do you think? don’t think a lot let’s see it in action 😅.

$ npm run electron

For now, you should see the application up and running with the versions of code, chrome, and electron we using, hmmm we did it 😉.

Conclusion

Building desktop apps isn’t that hard, and we can use some powerful tool like node, angular, electron, and typescript to do awesome work, and you know what? even if you web developer it’s not bad to try some new techs in your free time, I'm pretty sure that you going to learn something new from trying new techs 😉.

I may add a new post to write some unit test for our application if I have free time.

And if you stuck you can always refer to the Github repo of this application.

AhmedMKamal/angular-electron