Install the jspm command line interface. jspm is a package manager for client-side dependencies. Read up on it... it's great.
npm install jspm -g
Create a folder for the project.
mkdir minimal
cd minimal
Initialize jspm client package management...
Accept all the defaults EXCEPT use the Babel transpiler option (vs Traceur)
jspm init
Enable all the fancy cutting edge babel goodness by adding the following line to the babelOptions in your config.js (jspm init created the config.js file):
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"stage": 0, <------ add this to turn on the hotness
"optional": [
"runtime"
]
},
...
Install Aurelia
jspm install aurelia-framework
jspm install aurelia-bootstrapper
Create an index.html that uses the SystemJS loader (jspm's module loader counter-part) to bootstrap Aurelia.
<!doctype html>
<html>
<head>
<title>Aurelia</title>
</head>
<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>
</html>
When Aurelia bootstraps it's going to look for a default view and view-model... create them:
app.js
export class App {
message = 'hello world';
}
app.html
<template>
${message}
</template>
Install gulp and browser-sync to serve the files:
npm install gulp
npm install --save-dev browser-sync
Add a gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
// this task utilizes the browsersync plugin
// to create a dev server instance
// at http://localhost:9000
gulp.task('serve', function(done) {
browserSync({
open: false,
port: 9000,
server: {
baseDir: ['.'],
middleware: function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}
}
}, done);
});
Start the webserver.
gulp serve
Browse to the app:
http://localhost:9000
Done.
Here's what your project structure will look like when you're finished:
Note: this is just a quick and dirty setup. It's not necessarily the recommended folder structure, and the loader is using babel to transpile the js files on the fly. You'll want to fine tune this to your needs. The intent here is to show you how to get up and running in the fewest steps possible.
