Electron with Angular 2 and Angular 2 CLI


In this tutorial ,we are going to build a starter project which shows you how you can use Electron with Angular 2 to build Desktop applications .The final project starter will be available from GitHub so feel free to clone it and start using it to build your Electron app with Angular 2 without reinventing the wheel .

But if you want to go through the process step by step ,lets get started .

The first thing you need to do is installing the Angular 2 CLI which is a nice tool inspired from ember-cli that allows you to quickly scaffold a new Angular 2 based project and also assists you during the development of your project by providing commands to scaffold different Angular 2 artifacts such as components ,routes etc .and provides you with a development server .So oepn up your terminal/command prompt and enter the following

npm install -g angular-cli

Make sure you have Node.js and NPM installed on your system but since your are working with Electron then you’ll definitely have them already installed .

Next we need to scaffold a new Angular 2 project

ng new electron-angular2-starter

cd electron-angular2-starter

ng serve

If you have no problem you should be able to visit your app from your browser by going to http://localhost:4200 .

You’ll have a nice “app works!” message displayed .

Now just go back to your terminal and enter CTRL+C to terminate the development server and then start integrating our Angular 2 project with Electron .

But before we continue you need to have Electron installed

npm install -g electron

Inside electron-angular2-starter create a folder with name ‘electron’

mkdir electron
touch main.js package.json

open up package.json and copy the following

{
  "name": "electron-angular2-starter",
  "version": "0.1",
  "main": "main.js"
}

Next open up main.js and copy the following code

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow

function createWindow () {

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

  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()
  }
})

Next go to your app src/index.html file and modify this line

<base href="/">

to

<base href="./">			  

Next we need to create some npm scripts which will make the process easy for us .

So open up your Angular 2 project package.json (exists on the root of your project folder )

Under scripts add these 3 scripts

"build": "ng build && cp -R src/public dist/public",
"postbuild": "cp -a electron/. dist",
"electron": "npm run postbuild && electron dist" 

For windows –

 

“build-electron”: “ng build –base-href . && copy src\\electron\\* dist”,
“electron”: “npm run build-electron && electron dist”

 

Now, let’s create “Package.json” for electron app

 

srs/electron –> package.json

 

{
  “name”: “angular2-electron-cli”,
  “version”: “0.1.0”,
  “main”: “main.js”
}

 

That’s it you can now build and run your project with

npm run build 
npm run electron

You should have your Electron app started with the “app works!” message just like in the browser .

Electron with Angular 2 and Angular 2 CLI

Conclusion

This tutorial comes to end .You can also find the complete project on GitHub .I hope this post was helpful for you and see you in next tutorials .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s