germ/src/app/web-bootstrap.js

Opinionated boilerplate to unify server and client side code

var react = require('react')
  , route = require('./web-routes')
  , indexApp = require('../components/index');

var routeState;

/*
 * [RUN-IN-CLIENT]
 * Bootstrap the client environment to use the HTML5 history push/pop states
 * for routing and expose our globe initial state.
 */
if(process.env.RUN_ENV === 'browser') {
  // wire up the HTML5 history to our routes and on change
  window.History.Adapter.bind(window, "statechange", function() {
    routeState = route(document.location.pathname + document.location.search);
    react.renderComponent(routeState.view(routeState.props), document.getElementById('viewport'));
  });







/*
 * [RUN-IN-SERVER]
 * Bootstrap the server environment to parse routes and handle a basic API call.
 */
} else if(process.env.RUN_ENV === 'server') {
  module.exports = function(app, next) {
    app.use(function(req,res,next) {
      routeState = route(req.originalUrl);

      // if no match let expressjs handle the request.
      if(!routeState ) {
        return next();
      }

      var html = react.renderComponentToString(routeState.view(routeState.props));
      res.render('web-app', {viewport: html});
    });

    app.get('/api/ping', function(req, res, next) {
      res.send('pong');
    });

    next(null);
  }
}