aurelia-nw

aurelia, nodewebkit, nw.js, ES6 comments edit

This is part 1 of a series that outlines creating an nw.js (node-webkit) app with Aurelia. Part 2 can be found here

Set Up a Barebones NW.js App

Since we will be writing all of our Javascript in ES6 format, let’s create a src folder to contain it. When we compile it to ES5 with Babel, we’ll output it to a build folder. Let’s also create a package.json file in our root directory (npm init) for project description and managing node dependencies - this will also contain our nw manifest properties. Here are what the manifest properties look like:

{
  "name": "aurelia-nw",
  "version": "1.0.0",
  "main": "index.html",
  "window": {
  	"title": "Aurelia-NW.js",
  	"toolbar": true,
  	"frame": true,
  	"position": "center",
  	"fullscreen": false,
  	"resizable": true,
  	"always-on-top": false,
  	"width": 1400,
  	"height": 650,
  	"min_width": 600,
  	"min_height": 400
  }
}

For this example, we’ll make use of a library called node-webkit-builder to build and run our app. First, install it via npm install node-webkit-builder --save-dev. Now add a gulpfile.js to our root directory. All of the gulp tasks that we will define can be placed in this one gulpfile.js, but I prefer to break them out into their own files and that is how I will continue on with this example. Create a folder named gulp in the root directory, and create a folder named tasks inside of it. Now install require-dir (npm install require-dir --save-dev), and inside of gulpfile.js add this line:

 require('require-dir')('gulp/tasks');

Inside of the tasks folder, we’ll add run.js and configure node-webkit-builder to run our app (use whichever platform options you need):

var gulp = require('gulp'),
	NwBuilder = require('node-webkit-builder'),
	paths = require('../paths');

gulp.task('run', function(cb){
	var nw = new NwBuilder({
		files: paths.root + '**/**',
		platforms: ['win64'],
		buildDir: paths.temp,
		cacheDir: paths.nwCache,
		version: '0.12.0' // this is the nw.js version we are using
	});

	nw.run(cb);

	return nw;
});

paths.js is just a file where I am storing file path config info. It looks like this

module.exports = {
  root: './',
	src: './src/',
	build: './build/',
	dist: './dist/',
	temp: './temp',
	nwCache: './nwCache'
}

We’ll now add a index.html to our root directory:

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Aurelia-NW.js</title>
</head>
<body>
	<h1>Loading...</h1>
</body>
</html>

Now run gulp run, and our nw app will start up for us. The project thus far can be found here.

Add Aurelia

Time to add Aurelia! Make sure jspm is installed (npm install -g jspm), then run jspm init. Choose all of the defaults except for the transpiler - choose Babel for that. In the generated config.js file, edit the top set of options to look like this:

{
  "transpiler": "babel",
   "babelOptions": {
     "optional": [
       "runtime",
       "es7.decorators",
       "es7.classProperties"
     ]
   },
   "paths": {
     "*": "build/*.js",
     "github:*": "jspm_packages/github/*.js",
     "npm:*": "jspm_packages/npm/*.js"
   }
}

Now install Aurelia via jspm. To do this, we’ll copy this section into our package.json (it’s from the Aurelia starter app) and run jspm install -y.

"jspm": {
    "directories": {},
    "dependencies": {
      "aurelia-animator-css": "github:aurelia/animator-css@^0.2.0",
      "aurelia-bootstrapper": "github:aurelia/bootstrapper@^0.12.0",
      "aurelia-dependency-injection": "github:aurelia/dependency-injection@^0.7.0",
      "aurelia-framework": "github:aurelia/framework@^0.11.0",
      "aurelia-http-client": "github:aurelia/http-client@^0.8.1",
      "aurelia-router": "github:aurelia/router@^0.8.0",
      "bootstrap": "github:twbs/bootstrap@^3.3.4",
      "css": "github:systemjs/plugin-css@^0.1.9",
      "font-awesome": "npm:font-awesome@^4.3.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.1.13",
      "babel-runtime": "npm:babel-runtime@^5.1.13",
      "core-js": "npm:core-js@^0.9.4"
    }
  }

Now configure index.html to load Aurelia:

<body aurelia-app>
	<h1>Loading...</h1>

	<script src="jspm_packages/system.js"></script>
	<script src="config.js"></script>
	<script>
		System.import('aurelia-bootstrapper');
	</script>
</body>

Add a simple Aurelia viewmodel and view.

src\app.js:

export class App {
	title = 'Aurelia via NW.js';
}

src\app.html

<template>
	<h1>${title}</h1>
</template>

The last thing we need to do in order to run this via nw is to compile our ES6 Javascript to ES5. Let’s set up a gulp task to do that.

gulp\tasks\build.js

var gulp = require('gulp'),
	paths = require('../paths'),
	sourcemaps = require('gulp-sourcemaps'),
	plumber = require('gulp-plumber'),
	to5 = require('gulp-babel'),
	assign = Object.assign || require('object.assign');

gulp.task('build-scripts', function(){
	var compilerOptions = {
		modules: 'system',
		moduleIds: false,
		comments: false,
		compact: false,
		stage: 2,
		optional: [
			"es7.decorators",
			"es7.classProperties"
		]
	};
	return gulp.src(paths.src + '**/*.js')
		.pipe(plumber())
		.pipe(sourcemaps.init({loadMaps: true}))
		.pipe(to5(assign({}, compilerOptions, {modules: 'system'})))
		.pipe(sourcemaps.write({includeContent: true}))
		.pipe(gulp.dest(paths.build));
});

gulp.task('build-html', function(){
	return gulp.src(paths.src + '**/*.html')
		.pipe(gulp.dest(paths.build));
});

And if we modify our run task like so:

gulp.task('run', ['build-scripts', 'build-html'], function (cb) { ...

then we can run gulp run and see Aurelia running with NW.js.

The project thus far can be found on here on Github. So far, we have only accomplished the minimum amount of setup to get Aurlia running within nw. In the next post, we’ll set up (and automate via gulp) styles, versioning, tests, production ready builds, and file watching for more rapid development.

Comments