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:
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.
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()
}
});
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 to 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 to 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. To do 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 the code is 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 is available in https://git.mimacom.com/users/cagr/repos/article-electron-angular/commits/0b1e59f3f70f887f8b889dfe2d79912b82d94b21