freshcutdevelopment/app.html

## app.html
<!-- app/app.html -->

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

## app.js
// app/app.js

import {getStatus} from 'status';

getStatus();

## app_v2.js
// app/app.js
export class App{
  constructor(){
    this.status = "Aurelia has been Bootstrapped"+
                      "loading corresponding view for "+
                      "this view-model.. looking for app.html";
  }
}

## express_app.js
'use strict';

var express = require('express');
var app = express();

app.use(express.static('app'));

app.get('/', function(req, res) {
    res.sendfile('./app/test.html');
});

app.listen(5001);

## gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');

gulp.task('browser-sync', ['nodemon'], function() {
	browserSync.init(null, {
		proxy: "http://localhost:5001",
        files: ["app/**/*.*"],
        browser: "google chrome",
        port: 7001,
	});
});

gulp.task('nodemon', function () {

	return nodemon({script: 'app.js'})
	.on('restart', function(){
	  console.log("refreshing browser...");
	});

});

gulp.task('default', ['browser-sync'], function () {
});

## status.js
export function getStatus(){
  console.log('JSPM set up correctly!');
}

## test.html
<!-- app/test.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>
    <h1>test</h1>
  </body>
</html>

## test_v2.html
<!-- app/test.html -->
<!DOCTYPE html>
<html>
  ...
  <body>
    <h1>test</h1>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app');
    </script>
  </body>
</html>

## test_v3.html
<!-- app/test.html -->
<!DOCTYPE html>
<html>
  ...
  <body>
    ...
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## test_v4.html
<!-- app/test.html -->
<!DOCTYPE html>
<html>
  ...
  <body>
    <h1>Status - Page</h1>
    <div class="jumbotron">
      <div aurelia-app>
      </div>
    </div>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
	<!-- app/app.html -->

	<template>
	<h1>${status}</h1>
	</template>
	// app/app.js
	export class App{
	constructor(){
	this.status = "Aurelia has been Bootstrapped"+
	"loading corresponding view for "+
	"this view-model.. looking for app.html";
	}
	}
	'use strict';

	var express = require('express');
	var app = express();

	app.use(express.static('app'));

	app.get('/', function(req, res) {
	res.sendfile('./app/test.html');
	});

	app.listen(5001);
	var gulp = require('gulp');
	var browserSync = require('browser-sync');
	var nodemon = require('gulp-nodemon');

	gulp.task('browser-sync', ['nodemon'], function() {
	browserSync.init(null, {
	proxy: "http://localhost:5001",
	files: ["app/*/.*"],
	browser: "google chrome",
	port: 7001,
	});
	});

	gulp.task('nodemon', function () {

	return nodemon({script: 'app.js'})
	.on('restart', function(){
	console.log("refreshing browser...");
	});

	});

	gulp.task('default', ['browser-sync'], function () {
	});
	export function getStatus(){
	console.log('JSPM set up correctly!');
	}
	<!-- app/test.html -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	</head>
	<body>
	<h1>test</h1>
	</body>
	</html>