Making Desktop apps is generally harder than making web apps, and given the fact that you have to target 3 different OS’s it makes it even harder. But if your app works on the web it will work with electron. Electron has a built in Chromium browser that it uses to serve your application and its unique ability to target different OS’s services via the electron API allows you to do things like Native desktop notifications in a very easy way and package your app properly for any OS.
How electron works
Building an electron app with Angular2
I will be using webpack and base myself on this repo that I have made that does a couple more things that I am doing here like authenticating with github. You might want to check the code in there. At this time I am using rc0 release.
Creating a package.json
First things first, we need to import dependencies and setup or package.json so that via npm we install everything we need.
The important part of the package.json looks like this :
In the repository you will find some other things like development dependencies so that ts files can be compiled and redux for managing state. But these are really the important pieces that you have to have in your package.json file.
Other interesting part of the package.json file is the tasks. They look like this :
You can see the full file here
For now let’s focus on the build task and the electron. It just compiles the app with the default webpack.config.js file and the electron task simply runs electron and the source of the electron app, in this case src/app.
The webpack file is pretty straight forward, and if you have been using webpack with angular2 or have looked at [Angular class starter] (https://github.com/AngularClass/angular2-webpack-starter) it probably looks familiar.
The only specific thing here out of any other ordinary webpack config file is that we are targeting electron using the webpack-target-electron-renderer package.
Other than that we are telling webpack to compile our app into a app.js file that will be used by electron. We also compile some polyfill and vendor packages like rxjs using the CommonsChunkPlugin plugin from webpack.
You can see the full file here
Building the electron app
Everything for our app will live inside the folder src/app and as we saw that is where the electron script will be looking to find our app. So let’ start creating the app and everything necessary for it.
In this folder we will need a package.json file as well, but this one will be used only by electron, it will provide some basic information like the name, version and where the entry point of the app is. The electron script will look for this file to bootstrap the electron app. This file looks like this :
We then need to create our main.js file. This file tells electron where the app is, where the entry html file is and provides some basic methods for initializing and closing our app when the user closes the window. This is the full file :
Next step is to create our angular app. This will be just a normal angular app. Create an app.ts file inside this folder with the following :
We will also need an index.html file.
Running the app
You can now run :
And that will build the app. And if after you run
that will start electron with your app.
You now have an angular2 app running inside electron. You will notice that is basically looks pretty much like a Chrome browser running on a destkop window. And that is more or less what is happening.
You can now head over to this repo Where I am doing a little more than just this. Here I am doing a basic connection to the github api.
You need to provide a config.json file inside the src/app folder that should look like :
Notice the warning on the repo :
Don’t use this in production as for production you should have a safe server side URI and not have your secret key in the app folder.
However this is a good way to start playing around with the browserWindow object from electron and other things that electron provides. You can check more on this in the electron documentation
Packaging your apps in electron is also an easy thing to do. There are several libraries that help you do this in an automated way via a simple js script task. One of those is electron-packager
You can configure all sorts of things, target different devices and do all sorts of things, you can find the documentation on their github page.
Electron is a very useful tool, I must admit that desktop apps has been something kind of unknown for me for a long time, although I enjoy some of these apps like slack I always thought it would be just too much pain to build on of those. Electron opens a new world of possibilities and it’s incredibly easy and fun to build with.
I encourage you to have a look and try out a sample app and you will see how easy it is to start building with it as soon as you pass the initial boilerplate associated with it which I described here in this blog post.
Some useful links :