Update for server-side rendering

Author: kpdecker

Gruntfile.js

@@ -7,16 +7,6 @@ module.exports = function(grunt) {
   grunt.file.mkdir(buildDir);
 
   grunt.initConfig({
-    // create a static webserver
-    connect: {
-      server: {
-        options: {
-          hostname: hostname,
-          base: buildDir,
-          port: port
-        }
-      }
-    },
     lumbar: {
       // performs an initial build so when tests
       // and initial open are run, code is built
@@ -34,6 +24,14 @@ module.exports = function(grunt) {
         output: buildDir
       }
     },
+    'hapi-routes': {
+      map: {
+        options: {
+          package: 'web',
+          dest: buildDir + '/module-map.json'
+        }
+      }
+    },
     // allows files to be opened when the
     // Thorax Inspector Chrome extension
     // is installed
@@ -50,7 +48,11 @@ module.exports = function(grunt) {
       }
     }
   });
-  
+
+  grunt.registerTask('hapi-server', function() {
+    // Self running.
+    require('./server');
+  });
   grunt.registerTask('open-browser', function() {
     var open = require('open');
     open('http://' + hostname + ':' + port);
@@ -59,14 +61,16 @@ module.exports = function(grunt) {
   grunt.loadTasks('tasks');
   grunt.loadNpmTasks('thorax-inspector');
   grunt.loadNpmTasks('lumbar');
+  grunt.loadNpmTasks('hula-hoop');
   grunt.loadNpmTasks('grunt-contrib-connect');
 
   grunt.registerTask('default', [
     'ensure-installed',
     'thorax:inspector',
+    'hapi-routes',
     'lumbar:init',
-    'connect:server',
+    'hapi-server',
     'open-browser',
     'lumbar:watch'
   ]);
-};
+};

js/init.js

@@ -25,20 +25,25 @@ Application.initBackboneLoader(Application, function(type, module) {
   // You have failed to load the module. Let the world know.
 });
 
-$(function() {
+$(window).ready(function() {
+  // Check to see if we have rendered content that we can try to restore
+  var appEl = $('[data-view-name="application"]');
+  if (appEl.length) {
+    // Restore the application view explicitly
+    Application.restore(appEl);
+  } else {
+    // We are starting with a blank page, render a new element
+    $('body').append(Application.el);
+    Application.render();
+  }
+
   // Application and other templates included by the base
   // Application may want to use the link and url helpers
   // which use hasPushstate, etc. so setup history, then
   // render, then dispatch
   Backbone.history.start({
-    pushState: false,
-    root: '/',
-    silent: true
+    pushState: true,
+    root: '/'
   });
-  // TODO: can remove after this is fixed:
-  // https://github.com/walmartlabs/lumbar/issues/84
-  Application.template = Thorax.templates.application;
-  Application.appendTo('body');
-  Backbone.history.loadUrl();
 });
 

lumbar.json

@@ -12,7 +12,7 @@
         "thorax-loading",
       ],
       "scripts": [
-        {"src": "bower_components/bootstrap/js/bootstrap.js", "global": true},
+        {"src": "bower_components/bootstrap/js/bootstrap.js", "global": true, "server": false},
         {"src": "lumbar-loader-backbone.js", "bower": "lumbar-loader"},
         "js/init.js",
         "js/model.js",
@@ -31,6 +31,9 @@
 
   "templates": {
     "root": "templates/",
+    "precompile": {
+      "data": true
+    },
     "auto-include": {
       "js/views/(.*)\\.(js|coffee)": [
         "templates/$1.handlebars",
@@ -39,10 +42,12 @@
       ]
     },
     "knownHelpers": [
+      // Place any helpers created in the app here to optimize their use
     ],
     "js/init.js": [
       "templates/application.handlebars"
     ]
   },
   "loadPrefix": "/r/",
+  "server": true
 }

package.json

@@ -17,6 +17,10 @@
     "test": "node ./node_modules/grunt-cli/bin/grunt test"
   },
   "engines": {
-    "node" : ">=0.8.0"
+    "node": ">=0.8.0"
+  },
+  "dependencies": {
+    "hula-hoop": "0.0.1",
+    "hapi": "^5.0.0"
   }
 }

server/index.js

@@ -0,0 +1,42 @@
+var Hapi = require('hapi'),
+    HulaHoop = require('hula-hoop');
+
+var server = new Hapi.Server(8000);
+
+var appName = 'throax-seed';
+
+// Setup resource handling
+HulaHoop.api.resourceLoader.register(appName, [
+  {name: 'main', version: '1.0.0', path: './build'}
+]);
+server.route([
+  {
+    path: '/r/{path*}',
+    method: 'GET',
+    handler: HulaHoop.endpoints.resources()
+  }
+]);
+
+// Setup the user endpoint routing
+var pageHandler = HulaHoop.endpoints.page(appName, {
+  host: 'foo.com',
+  resourceRoot: '/r/'
+});
+
+server.route(
+  HulaHoop.api.resourceLoader.routes().map(function(route) {
+    return {
+      path: route,
+      method: 'GET',
+      handler: pageHandler,
+      config: {
+        cache: {
+          expiresIn: 5*60*1000,
+          privacy: 'private'
+        }
+      }
+    };
+  })
+);
+
+server.start();