How to configure Electron to use Angular 2

Electron is an open-source framework developed by Github. It allows for the development of desktop GUI applications using Node.js runtime and the Chromium web browser. In other words is a framework for the development desktop applications with web technologies.

Examples of applications created with this technology are GitHub’s Atom and Microsoft‘s Visual Studio Code

Our first application

For build our first application we only need a few files and npm’s magic, the most important are:

1.    package.json

We use npm as package manager so this file must have at least this lines.

{

    "name": "electron-angular",

    "version": "1.0.0",

    "description": "Example Electron-Angular application",

    "main": "src/main.js",

    "scripts": {

        "start": "electron ."

    },

    "author": "Carlos",

    "license": "MIT",

    "dependencies": {

       

    },

    "devDependencies": {

        "electron": "^1.4.1"

    }

}

 

If you are familiarly with npm, you can see that we have a start command  (for execute the application) and the dependency electron.

2.    src/main.js

This file is for the main code of the application, in this sample we only create a window.

const electron = require('electron')

const app = electron.app

const BrowserWindow = electron.BrowserWindow

let mainWindow

function createWindow () {

  mainWindow = new BrowserWindow({width: 800, height: 600})

  // Load the "application"

  mainWindow.loadURL(`file://${__dirname}/index.html`)

  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {

    mainWindow = null

  })

}

app.on('ready', createWindow)

app.on('window-all-closed', function () {

  if (process.platform !== 'darwin') {

    app.quit()

  }

})

app.on('activate', function () {

  if (mainWindow === null) {

    createWindow()

  }

})

3.    scr/index.html

In this file we have the graphical user interface, for this first application we only have a greeting.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Hello World!</title>

  </head>

  <body>

    <h1>Hello World!</h1>

    <!-- All of the Node.js APIs are available in this renderer process. -->

    We are using node <script>document.write(process.versions.node)</script>,

    Chromium <script>document.write(process.versions.chrome)</script>,

    and Electron <script>document.write(process.versions.electron)</script>.

  </body>

  <script>

    // You can also require other files to run in this process

    require('./renderer.js')

  </script>

</html>

Note: You can download all this code from here https://git.mimacom.com/users/cagr/repos/article-electron-angular/commits/50c0d3cc9148d6ff8e0acb6f7ddf9a32240ad0c2

Once we have created the files, we need download the dependencies before executing the application. For that, we executed this command in a console:

npm install

Now we are ready to execute our application:

npm start

Here is our first application with electron framework.

 

Adding angular

Now it’s time to add angular 2 in our application.

First step is insert angular 2 and typescript dependencies in package.json.

    "dependencies": {

        "@angular/common": "~2.1.1",

        "@angular/compiler": "~2.1.1",

        "@angular/core": "~2.1.1",

        "@angular/forms": "~2.1.1",

        "@angular/http": "~2.1.1",

        "@angular/platform-browser": "~2.1.1",

        "@angular/platform-browser-dynamic": "~2.1.1",

        "@angular/router": "~3.1.1",

        "@angular/upgrade": "~2.1.1",

        "angular-in-memory-web-api": "~0.1.13",

        "bootstrap": "^3.3.7",

        "core-js": "^2.4.1",

        "reflect-metadata": "^0.1.8",

        "rxjs": "5.0.0-beta.12",

        "systemjs": "0.19.39",

        "zone.js": "^0.6.25",

        "plugin-typescript": "^5.3.1",

        "typescript": "^2.1.4"    

    },

 

Of course, we need execute npm install for download the dependencies.

As we are using angular 2, we need configure the using of typescript. For that we create a new file named tsconfig.json with a typical typescript configuration.

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  }

}

Second step is change our index.html to use angular:

<!DOCTYPE html>

<html>

  <head>

    <title>Hello Angular</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

      body {color:#369;font-family: Arial,Helvetica,sans-serif;}

    </style>

 

    <!-- Polyfills for older browsers -->

    <script src="../node_modules/core-js/client/shim.min.js"></script>

    <script src="../node_modules/zone.js/dist/zone.js"></script>

    <script src="../node_modules/reflect-metadata/Reflect.js"></script>

    <script src="../node_modules/systemjs/dist/system.src.js"></script>

 

    <script> window.autoBootstrap = true; </script>

 

    <script src="systemjs.config.js"></script>

    <script>

      System.import('app').catch(function(err){ console.error(err); });

    </script>

  </head>

  <body>

    <my-app>Loading AppComponent content here ...</my-app>

  </body>

  <script>

    // You can also require other files to run in this process

    require('./renderer.js')

  </script>

</html>

One big thing is missing, our angular 2 application. For doing that, we create a new file app/app.component.ts.

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  template: `<h1>Hello {{name}}</h1>`

})

export class AppComponent { name = 'Angular'; }

Last thing is adding a standard systemjs.config.js to our project.

 

All code are available in https://git.mimacom.com/users/cagr/repos/article-electron-angular/commits/826b2cdafb52cc59c5082128106735f4aac7eb12

Generate executable

At this point we are using npm to execute our application, if we want to share our application we need a better way. This way is using electron-builder, which is a complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

Electron-builder needs info about our project, in pakage.json we must add:

    "build": {

        "appId": "mimacom",

        "mac": {

            "category": "apps"

        }

    },

We must not forget adding the dependency

"devDependencies": {

    "electron": "^1.4.1",

    "electron-builder": "^10.8.1"

 }

After install the dependency, we can use this command:

node_modules\.bin\build –w

Now we have our application packaged and ready to share.

More info and options about electron-builder are showed with this command:

node_modules\.bin\build –help

 

All code are available in https://git.mimacom.com/users/cagr/repos/article-electron-angular/commits/0b1e59f3f70f887f8b889dfe2d79912b82d94b21

Facebooktwittergoogle_pluspinterestlinkedinmail

Trackback from your site.

Carlos Garcia

Leave a comment