Angular 2 – Desktop apps with Electron

Hi Guys,

Hope you are all well. In this post let’s see how to make awesome desktop apps with electron framework and angular 2.

Electron is a framework by github to create awesome desktop apps with web technologies and is used widely. We will be creating a SPA using angular 2 and wrapping it to run in the electron app using webpack.

Let’s begin.

The complete code for this tutorial can be found here.

A screencast of this tutorial:

Create a new project by running the below command. (Better do it inside a new directory).

Answer the questions asked therein (or simply hit enter). Now to install the electron framework run the below command.

This will install the electron binaries.

Now create a new file called index.js and add the below code in it.

This will simply create a new window with the specified height and width and load the index.html file in it.

Create a new directory called app and add the file index.html in it.

Open the index.html file and add the below code in it.

Now open up package.json file and modify the scripts to include start as shown below.

Now simply open up your terminal and run the command below

You should see a window like the one below.

Kazam_screenshot_00037

Now this is a simple desktop app created using electron. We could use the power of single page applications to create an awesome app. To do so we are making use of angular 2.

Open up package.json and add the below dependencies to it.

After adding the dependencies run npm install again.

Now we will be using typescript for writing the app. So to compile the typescript files we need a tsconfig.json which specifies the options.

Let’s create a tsconfig.json file. Add the below code into it.

Open up a new file called app.ts and add the below code into it.

I don’t think I need to explain the above code as it is nothing but a single component which has a template that says Angular 2 app inside a desktop app.

Now that we have the angular 2 app, let’s write a webpack config file that will bundle our deps into a single file (or a couple of files as we will see).

Open up a webpack.config.js file (out of the app directory) and add the below code in it.

I am not going to explain the above code in detail as I am planning to put up a separate post on webpack in the coming weeks.

So briefly, Webpack is simply like a bundler that bundles all our dependencies into a single file which we can then reference in our index.html file. Every webpack config file will have 4 major parts or components.

entry – where you specify the deps to be bundled.

output – Where the build file or the output file should be placed.

resolve – Where the files to be taken are specified. Usually this value is given in file extensions so as to mention that all files belonging to that specific extension are to be resolved.

loaders – Modules that would transform the files; for eg; here we have used a typescript loader; and we also exclude the files in the node_modules directory.

The commonchunks plugin used here is simply to split the built file into chunks. (2 major chunks angular2.js and common.js). We would also have an app.js when the build finishes (Look at the entry section, we have an entry for app).

Now open up package.json file again and modify the scripts as shown below.

That’s it. Now run the below command inside a terminal.

Your final directory structure would look as shown below.

Kazam_screenshot_00039

As you can see we have our js files in the build directory. Now we need to reference them in our index.html. Open up our index.html file and add script tags as shown below.

You could also see that I am using the selector for AppComponent (myapp) here. This is where our template from the AppComponent would be injected. (Single-page application).

Now open up your terminal and run npm start. You would see a window as shown below.

Kazam_screenshot_00040

(I changed the template in the app.ts file).

Now you could see that the template in the app.ts file gets is present on the screen of our app which means that the angular 2 app is built and then made to run along with the desktop app created by electron. This is how angular 2 could be used to make desktop apps along with electron framework.

To bundle and distribute the created applications please click here.

Hope this helped you guys. Thanks for reading. Peace.. :)

 

 

  • var app = require(‘app’);
    var BrowserWindow = require(‘browser-window’);

    The above code throw me an error during load and new way of using built in modules is like as below.

    var app = require(‘electron’).app
    var BrowserWindow = require(‘electron’).BrowserWindow

    Ref: http://electron.atom.io/blog/2015/11/17/electron-api-changes

    • Tom Archer [tarcher@MSFT]

      I used the following and it worked for me:

      const {app, BrowserWindow} = require(‘electron’);
      var mainWindow = null;

  • Dirk Decher

    Is there a chance that you create a sample about box? I do have some problem to understand how I have to create a component about.component that should show the information:
    application.Version
    node.Version
    Chromium.Version
    V8.Version

    I have some trouble to understand how I can interact with the electron information within a component.
    Well done and thank you to haseebp for his comment

  • Izbicki Kuba

    is your tutorial outdated? i’ve done everything, no errors (except one with require(‘electron’)), and angular2 doesnt work, it wont show the content of the Component in the widow (“Angular 2 app inside a desktop app”)

    • Izbicki Kuba

      ok so i have figured it out, with this folder structure, the index.html is in app folder and build folder is one level above, and the scripts in the index.html had wrong src paths, i just had to change them to start from one level up (e.g: ../../build/common.js, instead of ../build/common.js)