Moving to a JSON api rather html partials. Renaming a few bits and bobs

Author: Matt Gaunt

gulp-tasks/service-worker.js

@@ -37,16 +37,13 @@ gulp.task('service-worker', function(cb) {
     ],
     dynamicUrlToDependencies: {
       '/app-shell': ['server/views/layouts/app-shell.handlebars'],
-      '/partials/': [
-        'server/views/layouts/partial.handlebars',
+      '/api/': [
         'server/views/index.handlebars'
       ],
-      '/partials/url-1': [
-        'server/views/layouts/partial.handlebars',
+      '/api/url-1': [
         'server/views/url-1.handlebars'
       ],
-      '/partials/url-2': [
-        'server/views/layouts/partial.handlebars',
+      '/api/url-2': [
         'server/views/url-2.handlebars'
       ]
     },

server/app.js

@@ -13,9 +13,11 @@
 
 var serverController = require('./controllers/server-controller');
 var StaticPageController = require('./controllers/static-page-controller');
-var PartialsController = require('./controllers/partials-controller');
+var APIController = require('./controllers/api-controller');
 
-// PartialsController serves up the HTML without any HTML body or head
-serverController.addEndpoint('/partials*', new PartialsController());
+// APIController serves up the HTML without any HTML body or head
+serverController.addEndpoint('/api*', new APIController(
+  serverController.getHandleBarsInstance()
+));
 // The static page controller serves the basic form of the pages
 serverController.addEndpoint('/*', new StaticPageController());

server/controllers/api-controller.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var path = require('path');
+
+var pathConfigs = require('../models/path-config.js');
+
+function APIController(handlebarsInstance) {
+  this.handlebarsInstance = handlebarsInstance;
+}
+
+// This method looks at the request path and renders the appropriate handlebars
+// template
+APIController.prototype.onRequest = function(req, res) {
+  var urlSections = req.path.split('/');
+  urlSections = urlSections.filter(function(sectionString) {
+    return sectionString.length > 0;
+  });
+
+  var urlPath = null;
+  if (urlSections.length === 1) {
+    urlPath = '/';
+  } else {
+    urlPath = '/' + urlSections[1];
+  }
+
+  var pathConfig = pathConfigs.getConfig(urlPath);
+  if (!pathConfig) {
+    res.status(404).send();
+    return;
+  }
+
+  var viewPath = path.join(
+    __dirname,
+    '/../views',
+    pathConfig.data.view + '.handlebars'
+  );
+
+  this.handlebarsInstance.render(viewPath, pathConfig)
+    .then(function(renderedTemplate) {
+      res.json({
+        title: pathConfig.data.title,
+        partialinlinestyles: pathConfig.data.inlineStyles,
+        partialremotestyles: pathConfig.data.remoteStyles,
+        partialscripts: pathConfig.data.remoteScripts,
+        partialhtml: renderedTemplate
+      });
+    })
+    .catch(function(err) {
+      res.status(500).send();
+    });
+};
+
+module.exports = APIController;

server/controllers/partials-controller.js

@@ -4,7 +4,12 @@ var exphbs = require('express-handlebars');
 
 function ServerController() {
   var expressApp = express();
-  var expressServer = this.setUpServer(expressApp);
+  var handleBarsInstance = exphbs.create({
+    defaultLayout: 'default',
+    layoutsDir: path.join(__dirname, '/../views/layouts'),
+    partialsDir: path.join(__dirname, '/../views/partials')
+  });
+  var expressServer = this.setUpServer(expressApp, handleBarsInstance);
 
   this.getExpressApp = function() {
     return expressApp;
@@ -13,16 +18,16 @@ function ServerController() {
   this.getExpressServer = function() {
     return expressServer;
   };
+
+  this.getHandleBarsInstance = function() {
+    return handleBarsInstance;
+  };
 }
 
-ServerController.prototype.setUpServer = function(app) {
+ServerController.prototype.setUpServer = function(app, handleBarsInstance) {
   // Set up the use of handle bars and set the path for views and layouts
   app.set('views', path.join(__dirname, '/../views'));
-  app.engine('handlebars', exphbs({
-    defaultLayout: 'default',
-    layoutsDir: path.join(__dirname, '/../views/layouts'),
-    partialsDir: path.join(__dirname, '/../views/partials'),
-  }));
+  app.engine('handlebars', handleBarsInstance.engine);
   app.set('view engine', 'handlebars');
 
   // Define static assets path - i.e. styles, scripts etc.

server/controllers/server-controller.js

@@ -24,7 +24,7 @@ StaticPageController.prototype.onRequest = function(req, res) {
     return;
   default:
     // Use default layout
-    res.render(pathConfig.view, pathConfig);
+    res.render(pathConfig.data.view, pathConfig);
     return;
   }
 };

server/controllers/static-page-controller.js

@@ -4,27 +4,31 @@ var path = require('path');
 var pathConfigs = {
   '/': {
     view: 'index',
+    title: 'Index',
     inlineStyles: getFileContents(['/styles/core.css']),
     remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
       '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/url-1': {
     view: 'url-1',
+    title: 'URL 1',
     inlineStyles: getFileContents(['/styles/core.css']),
     remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
       '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/url-2': {
     view: 'url-2',
+    title: 'URL 2',
     inlineStyles: getFileContents(['/styles/core.css']),
     remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
       '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/app-shell': {
     view: '',
+    title: 'App Shell',
     inlineStyles: getFileContents(['/styles/core.css']),
     remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
       '400,300,700,500,400italic'],
@@ -53,8 +57,8 @@ module.exports = {
       return null;
     }
 
-    // This needed to ensure changes made to the objects dont stick / alter
-    // the original object
-    return Object.create(object);
+    return {
+      'data': object
+    };
   }
 };

server/models/path-config.js

@@ -1,7 +1,7 @@
-{{#if remoteStyles}}
+{{#if data.remoteStyles}}
 <script>
   var remoteStyles = [
-    {{#each remoteStyles}}
+    {{#each data.remoteStyles}}
     '{{this}}',
     {{~/each}}
   ];
@@ -26,7 +26,7 @@
 
 <!-- In case the browser has JS disabled -->
 <noscript>
-  {{#each remoteStyles}}
+  {{#each data.remoteStyles}}
   <link href="{{this}}" rel="stylesheet" property="stylesheet" media="all">
   {{~/each}}
 </noscript>

server/views/layouts/partial.handlebars

@@ -18,7 +18,7 @@
 
 {{> async-css }}
 
-{{#each remoteScripts}}
+{{#each data.remoteScripts}}
 <script src="{{this}}" async></script>
 {{~/each}}
 </body>