Adding first version of the static page render

.eslintrc

@@ -14,7 +14,7 @@
             2
         ],
         "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
-        "max-len": [2, 80, 2, {"ignoreUrls": true}],
+        "max-len": [2, 80, 2],
         "new-cap": 2,
         "no-console": 0,
         "no-else-return": 2,
@@ -46,7 +46,7 @@
         "browser": true,
         "node": true
     },
-    "extends": "eslint:recommended",
+  "extends": "eslint:recommended",
   "globals": {
     "importScripts": true
   }

gulp-tasks/scripts.js

@@ -30,19 +30,21 @@ var gulpif = require('gulp-if');
 var streamify = require('gulp-streamify');
 var replace = require('gulp-replace');
 var license = require('gulp-license');
+var sourcemaps = require('gulp-sourcemaps');
+var rename = require('gulp-rename');
 
 gulp.task('scripts:watch', function() {
-  gulp.watch(GLOBAL.config.src + '/**/*.es6.js', ['scripts:es6']);
+  gulp.watch(GLOBAL.config.src + '/**/*.js', ['scripts']);
 });
 
 // Takes a set of objects defining inputs of javascript files
 // to run through browserify and babelify
 function compileES6Bundles(browserifyBundles, minify) {
   browserifyBundles.forEach(function(bundle) {
     var browserifyBundle = browserify({
-        entries: [bundle.srcPath],
-      })
-      .transform(babelify);
+      entries: [bundle.srcPath]
+    })
+    .transform(babelify);
 
     return browserifyBundle.bundle()
       .on('log', gutil.log.bind(gutil, 'Browserify Log'))
@@ -51,7 +53,7 @@ function compileES6Bundles(browserifyBundles, minify) {
       .pipe(replace(/@VERSION@/g, GLOBAL.config.version))
 
       // If this is a production build - minify JS
-      .pipe(gulpif(GLOBAL.config.env == 'prod', streamify(uglify())))
+      .pipe(gulpif(GLOBAL.config.env === 'prod', streamify(uglify())))
       .pipe(license(GLOBAL.config.license, GLOBAL.config.licenseOptions))
       .pipe(gulp.dest(bundle.dest));
   });
@@ -82,7 +84,7 @@ function generateES6Bundles(srcPath) {
     browserifyBundles.push({
       srcPath: './' + filepath,
       outputFilename: outputFilename,
-      dest: path.join(GLOBAL.config.dest, relativeDirectory),
+      dest: path.join(GLOBAL.config.dest, relativeDirectory)
     });
   });
 
@@ -111,6 +113,25 @@ gulp.task('scripts:es6', ['scripts:eslint'], function(cb) {
   cb();
 });
 
+// TODO: Add linting for es5 JS
+gulp.task('scripts:es5', [], function() {
+  return gulp.src([GLOBAL.config.src + '/**/*.es5.js'])
+    .pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.init()))
+
+    // Remove the .es5 from the end of the file name using gulp-rename
+    .pipe(rename(function(filePath) {
+      var fileExtensionLength = '.es5'.length;
+      filePath.basename = filePath.basename.substr(
+        0, filePath.basename.length - fileExtensionLength);
+    }))
+
+    .pipe(replace(/@VERSION@/g, GLOBAL.config.version))
+    .pipe(gulpif(GLOBAL.config.env === 'prod', uglify()))
+    .pipe(license(GLOBAL.config.license, GLOBAL.config.licenseOptions))
+    .pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.write()))
+    .pipe(gulp.dest(GLOBAL.config.dest));
+});
+
 // Delete any files currently in the scripts destination path
 gulp.task('scripts:clean', function(cb) {
   del([GLOBAL.config.dest + '/**/*.js'], {dot: true})
@@ -122,7 +143,10 @@ gulp.task('scripts:clean', function(cb) {
 gulp.task('scripts', function(cb) {
   runSequence(
     'scripts:clean',
-    ['scripts:es6'],
+    [
+      'scripts:es6',
+      'scripts:es5'
+    ],
     cb
   );
 });

gulp-tasks/styles.js

@@ -34,7 +34,7 @@ var AUTOPREFIXER_BROWSERS = [
   'opera >= 23',
   'ios >= 7',
   'android >= 4.4',
-  'bb >= 10',
+  'bb >= 10'
 ];
 
 gulp.task('styles:watch', function() {
@@ -53,12 +53,12 @@ gulp.task('styles:sass', function() {
   var stream = gulp.src(GLOBAL.config.src + '/**/*.scss')
 
     // Only create sourcemaps for dev
-    .pipe(gulpif(GLOBAL.config.env != 'prod', sourcemaps.init()))
+    .pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.init()))
     .pipe(sass())
     .pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
-    .pipe(minifyCSS())
+    .pipe(gulpif(GLOBAL.config.env === 'prod', minifyCSS()))
     .pipe(license(GLOBAL.config.license, GLOBAL.config.licenseOptions))
-    .pipe(gulpif(GLOBAL.config.env != 'prod', sourcemaps.write()))
+    .pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.write()))
     .pipe(gulp.dest(GLOBAL.config.dest));
 
   return stream;

gulp-tasks/third_party.js

@@ -23,5 +23,5 @@ gulp.task('third_party:watch', function() {
 
 gulp.task('third_party', function() {
   gulp.src(GLOBAL.config.src + '/third_party/**/*.*')
-    .pipe(gulp.dest(GLOBAL.config.dest + '/third_party'))
+    .pipe(gulp.dest(GLOBAL.config.dest + '/third_party'));
 });

package.json

@@ -10,6 +10,8 @@
     "babelify": "^6.3.0",
     "browserify": "^11.2.0",
     "del": "^2.0.2",
+    "express": "^4.13.3",
+    "express-handlebars": "^2.0.1",
     "glob": "^5.0.15",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "^3.1.0",
@@ -20,6 +22,7 @@
     "gulp-license": "^1.0.0",
     "gulp-minify-css": "^1.2.1",
     "gulp-minify-html": "^1.0.4",
+    "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",
     "gulp-sass": "^2.0.4",
     "gulp-sourcemaps": "^1.6.0",

server/app.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var serverController = require('./controllers/server-controller');
+var StaticPageController = require('./controllers/static-page-controller');
+
+serverController.addEndpoint('/*', new StaticPageController());

server/controllers/server-controller.js

@@ -0,0 +1,52 @@
+var path = require('path');
+var express = require('express');
+var exphbs = require('express-handlebars');
+
+function ServerController() {
+  var expressApp = express();
+  var expressServer = this.setUpServer(expressApp);
+
+  this.getExpressApp = function() {
+    return expressApp;
+  };
+
+  this.getExpressServer = function() {
+    return expressServer;
+  };
+}
+
+ServerController.prototype.setUpServer = function(app) {
+  app.set('views', path.join(__dirname, '/../views'));
+  app.engine('handlebars', exphbs({
+    defaultLayout: 'default',
+    layoutsDir: path.join(__dirname, '/../layouts')
+  }));
+  app.set('view engine', 'handlebars');
+
+  // Should be set POST login auth
+  app.use('/manifest.json',
+    express.static(path.join(__dirname + '/../../dist/manifest.json')));
+  app.use('/favicon.ico',
+    express.static(path.join(__dirname + '/../../dist/favicon.ico')));
+  app.use('/sw.js',
+    express.static(path.join(__dirname + '/../../dist/scripts/sw.js')));
+  app.use('/styles',
+    express.static(path.join(__dirname + '/../../dist/styles')));
+  app.use('/images',
+    express.static(path.join(__dirname + '/../../dist/images')));
+  app.use('/scripts',
+    express.static(path.join(__dirname + '/../../dist/scripts')));
+  app.use('/third_party',
+    express.static(path.join(__dirname + '/../../dist/third_party')));
+
+  console.log('Starting server on 3123');
+  return app.listen('3123');
+};
+
+ServerController.prototype.addEndpoint = function(endpoint, controller) {
+  this.getExpressApp().get(endpoint, function(req, res) {
+    controller.onRequest(req, res);
+  });
+};
+
+module.exports = new ServerController();

server/controllers/static-page-controller.js

@@ -0,0 +1,39 @@
+'use strict';
+
+function StaticPageController() {
+
+}
+
+StaticPageController.prototype.onRequest = function(req, res) {
+  switch (req.path) {
+  case '/':
+    res.render('index', {
+      inlineStyles: ['/styles/core.css'],
+      remoteStyles: [],
+      inlineScripts: [],
+      remoteScripts: ['/scripts/static-page.js']
+    });
+    break;
+  case '/url-1':
+    res.render('url-1', {
+      inlineStyles: ['/styles/core.css'],
+      remoteStyles: [],
+      inlineScripts: [],
+      remoteScripts: ['/scripts/static-page.js']
+    });
+    break;
+  case '/url-2':
+    res.render('url-2', {
+      inlineStyles: ['/styles/core.css'],
+      remoteStyles: [],
+      inlineScripts: [],
+      remoteScripts: ['/scripts/static-page.js']
+    });
+    break;
+  default:
+    res.status(404).send();
+    break;
+  }
+};
+
+module.exports = StaticPageController;

server/layouts/default.handlebars

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>App Shell</title>
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta id="theme-color" name="theme-color" content="#4527A0">
+
+    <link rel="manifest" href="/manifest.json">
+    <link rel="icon" href="/images/chrome-touch-icon-192x192.png" sizes="192x192" type="image/png">
+
+    {{#each inlineStyles}}
+    <!-- TODO: Inline these styles -->
+    <link rel="stylesheet" type="text/css" href="{{this}}">
+    {{~/each}}
+</head>
+<body>
+
+  <header class="header">
+      <button tabindex="-1" class="header__menu js-toggle-menu">
+        Toggle nav menu
+      </button>
+
+      <h1 class="header__title">App shell</h1>
+  </header>
+
+  <main class="main js-main" aria-role="main">
+    {{{body}}}
+  </main>
+
+  <section class="side-nav js-side-nav">
+    <div class="side-nav__content js-side-nav-content">
+      <div class="side-nav__header">
+        <h1 class="side-nav__title">App shell</h1>
+      </div>
+
+      <div class="side-nav__body">
+        <a tabindex="-1" class="side-nav__blog-post" href="/">Index</a>
+        <a tabindex="-1" class="side-nav__blog-post" href="/url-1">URL 1</a>
+        <a tabindex="-1" class="side-nav__blog-post" href="/url-2">URL 2</a>
+      </div>
+
+      <div class="side-nav__version">Version @VERSION@</div>
+    </div>
+  </section>
+
+  {{#each remoteScripts}}
+  <script src="{{this}}" async></script>
+  {{~/each}}
+</body>
+</html>

server/views/index.handlebars

@@ -0,0 +1 @@
+<h1>Index</h1>

server/views/url-1.handlebars

@@ -0,0 +1 @@
+<h1>URL 1</h1>

server/views/url-2.handlebars

@@ -0,0 +1 @@
+<h1>URL 2</h1>

src/scripts/controller/Controller.js

@@ -17,8 +17,27 @@
 
 export default class Controller {
 
-  loadScript (url) {
+  constructor() {
+    this.registerServiceWorker();
+  }
+
+  registerServiceWorker() {
+    if (!('serviceWorker' in navigator)) {
+      // Service worker is supported on this platform
+      return;
+    }
 
+    navigator.serviceWorker.register('/sw.js', {
+      scope: '/'
+    }).then((registration) => {
+      console.log('Service worker is registered.');
+    })
+    .catch((err) => {
+      console.log('Unable to register service worker.', err);
+    });
+  }
+
+  loadScript(url) {
     return new Promise((resolve, reject) => {
       var script = document.createElement('script');
       script.async = true;
@@ -31,30 +50,22 @@ export default class Controller {
     });
   }
 
-  loadCSS (url) {
+  loadCSS(url) {
     return new Promise((resolve, reject) => {
-
       var xhr = new XMLHttpRequest();
       xhr.open('GET', url);
       xhr.responseType = 'text';
       xhr.onload = function(e) {
-
-        if (this.status == 200) {
-
+        if (this.status === 200) {
           var style = document.createElement('style');
           style.textContent = xhr.response;
           document.head.appendChild(style);
           resolve();
-
         } else {
-
           reject();
-
         }
-      }
-
+      };
       xhr.send();
-
     });
   }