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).
|
1 |
npm init |
Answer the questions asked therein (or simply hit enter). Now to install the electron framework run the below command.
|
1 |
npm install electron-prebuilt --save-dev |
This will install the electron binaries.
Now create a new file called index.js and add the below code in it.
|
1 2 3 4 5 6 7 8 9 10 |
var app = require('app'); var BrowserWindow = require('browser-window'); app.on('ready', ()=>{ var mainWindow = new BrowserWindow({ width: 1280, height: 720 }) mainWindow.loadURL('file://' + __dirname + '/app/index.html'); }); |
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.
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>First App</title> </head> <body> <h1>Hello World</h1> </body> </html> |
Now open up package.json file and modify the scripts to include start as shown below.
|
1 2 3 |
"scripts": { "start": "electron ." }, |
Now simply open up your terminal and run the command below
|
1 |
npm start |
You should see a window like the one below.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
"devDependencies": { "electron-prebuilt": "^0.37.8", "ts-loader": "^0.7.2", "typescript": "^1.7.3", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0" }, "dependencies": { "angular2": "2.0.0-beta.17", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12" } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "compilerOptions": { "target": "ES5", "module": "commonjs", "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true }, "files": [ "app/app.ts" ] } |
Open up a new file called app.ts and add the below code into it.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
///<reference path="../node_modules/angular2/typings/browser.d.ts"/> import {bootstrap} from 'angular2/platform/browser'; import {Component} from 'angular2/core'; @Component({ selector: 'myapp', template: '<h1>Angular 2 app inside a desktop app</h1>' }) export class AppComponent {} bootstrap(AppComponent); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
var path = require('path'); var webpack = require('webpack'); var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; module.exports = { devtool: 'source-map', debug: true, entry: { 'angular2': [ 'rxjs', 'reflect-metadata', 'angular2/core', 'angular2/router', 'angular2/http' ], 'app': './app/app' }, output: { path: __dirname + '/build/', publicPath: 'build/', filename: '[name].js', sourceMapFilename: '[name].js.map', chunkFilename: '[id].chunk.js' }, resolve: { extensions: ['','.ts','.js','.json', '.css', '.html'] }, module: { loaders: [ { test: /\.ts$/, loader: 'ts', exclude: [ /node_modules/ ] } ] }, plugins: [ new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }), new CommonsChunkPlugin({ name: 'common', filename: 'common.js' }) ] }; |
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.
|
1 2 3 4 |
"scripts": { "build": "webpack --progress --profile --colors --display-error-details --display-cached", "start": "electron ." }, |
That’s it. Now run the below command inside a terminal.
|
1 |
npm run build |
Your final directory structure would look as shown below.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <title>First App</title> </head> <body> <myapp></myapp> <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="../build/common.js"></script> <script src="../build/angular2.js"></script> <script src="../build/app.js"></script> </body> </html> |
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.
(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.. 
