Got it workin.

Author: Ralph Holzmann

.gitignore

@@ -0,0 +1,3 @@
+build
+tmp
+node_modules

Brocfile.js

@@ -0,0 +1,39 @@
+var esTranspiler = require('broccoli-babel-transpiler');
+var pickFiles = require('broccoli-static-compiler');
+var concat = require('broccoli-concat');
+var mergeTrees = require('broccoli-merge-trees');
+var filterES6Modules = require('broccoli-es6-module-filter');
+var cjsWrap = require("broccoli-cjs-wrap");
+var browserify = require('broccoli-browserify');
+
+var serverTree = pickFiles("src", {
+  srcDir: "",
+  files: [
+    'app/**/*.js',
+    'server.js'
+  ],
+  destDir: '/'
+});
+serverTree = esTranspiler(serverTree);
+
+var clientTree = pickFiles("src", {
+  srcDir: "",
+  files: [
+    "app/**/*.js",
+    "client.js"
+  ],
+  destDir: '/public'
+});
+clientTree = esTranspiler(clientTree);
+clientTree = browserify(clientTree, {
+  entries: ["./public/client.js"],
+  outputFile: "./public/app.js"
+});
+
+var assetsTree = pickFiles("src/assets", {
+  srcDir: "",
+  files: ["*"],
+  destDir: "public"
+});
+
+module.exports = mergeTrees([serverTree, clientTree, assetsTree]);

Gruntfile.js

@@ -0,0 +1,44 @@
+module.exports = function (grunt) {
+  require('load-grunt-tasks')(grunt);
+
+  // Define the configuration for all the tasks
+  grunt.initConfig({
+    concurrent: {
+      dev: {
+        tasks: ['broccoli:development:watch', 'nodemon:development'],
+        options: {
+          logConcurrentOutput: true
+        }
+      }
+    },
+    broccoli: {
+      development: {
+        dest: 'build',
+        env: 'development',
+        host: "0.0.0.0",
+        port: 5002,
+        liveReload: true
+      }
+    },
+    nodemon: {
+      development: {
+        script: 'build/server.js',
+        watch: ["build"]
+      }
+    }
+  });
+
+  grunt.registerTask('serve', function (environment) {
+    if (!environment) { 
+      environment = "development";
+    }
+
+    grunt.task.run([
+      'concurrent'
+    ]);
+  });
+
+  grunt.registerTask('default', [
+    'serve'
+  ]);
+};

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "htt-www",
+  "version": "1.0.0",
+  "description": "Hometown Tickets Website",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Ralph Holzmann",
+  "license": "ISC",
+  "dependencies": {
+    "almond": "^0.3.0",
+    "broccoli": "^0.13.3",
+    "broccoli-babel-transpiler": "^4.0.0",
+    "broccoli-cjs-wrap": "0.0.6",
+    "broccoli-concat": "0.0.12",
+    "broccoli-es6-module-filter": "^0.1.9",
+    "broccoli-merge-trees": "^0.2.1",
+    "broccoli-static-compiler": "^0.2.1",
+    "express": "^4.12.0",
+    "grunt": "^0.4.5",
+    "grunt-broccoli": "^0.4.0",
+    "grunt-nodemon": "^0.4.0",
+    "react": "^0.12.2",
+    "react-router": "^0.12.0",
+    "serve-favicon": "^2.2.0"
+  },
+  "devDependencies": {
+    "broccoli-browserify": "^0.1.0",
+    "grunt-concurrent": "^1.0.0",
+    "load-grunt-tasks": "^3.1.0"
+  }
+}

src/app/components/meta.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Router from "react-router";
+
+var {State} = Router;
+
+var Meta = React.createClass({
+  mixins: [State],
+
+  getInitialState() {
+    var metaName = this.props.name;
+    var metaParts =  this.getRoutes().map((route) => {
+      return (route.handler.meta && route.handler.meta[metaName]) || "";
+    }).filter(Boolean);
+
+    return {
+      content: metaParts.join(" ")
+    };
+  },
+
+  render() {
+    return (
+      <meta name={this.props.name} content={this.state.content}></meta>
+    );
+  }
+});
+
+export default Meta;

src/app/components/title.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Router from "react-router";
+
+var {State} = Router;
+
+var Title = React.createClass({
+  mixins: [State],
+
+  getInitialState() {
+    var titleParts = this.getRoutes().map(function(route) {
+      return route.handler.title || "";
+    }).filter(Boolean);
+    titleParts.unshift("Hometown Tickets");
+
+    return {
+      title: titleParts.join(" | ")
+    };
+  },
+
+  render() {
+    return (
+      <title>{this.state.title}</title>
+    );
+  }
+});
+
+export default Title;

src/app/handlers/application.js

@@ -0,0 +1,42 @@
+import React from "react";
+import Router from "react-router";
+import Title from "../components/title";
+import Meta from "../components/meta";
+
+var RouteHandler = Router.RouteHandler;
+
+var Application = React.createClass({
+
+  renderBodyContents() {
+    return (
+      <div>
+        <RouteHandler/>
+      </div>
+    );
+  },
+
+  renderApplication() {
+    return (
+      <html>
+        <head>
+          <meta name="charset" content="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <Meta name="description" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="stylesheet" href="" />
+          <Title></Title>
+        </head>
+        <body>
+          {this.renderBodyContents()}
+          <script src="app.js"></script>
+        </body>
+      </html>
+    );
+  },
+
+  render() {
+    return process.browser ? this.renderBodyContents() : this.renderApplication();
+  }
+});
+
+export default Application;

src/app/handlers/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Router from "react-router";
+var RouteHandler = Router.RouteHandler;
+
+var Index = React.createClass({
+  statics: {
+    title: "This will be the page title",
+    meta: {
+      description: "This will be the meta description"
+    }
+  },
+
+  render() {
+    return (
+      <div>
+        Welcome! {process.browser ? 'Client' : 'Server'}
+        <RouteHandler/>
+      </div>
+    );
+  }
+});
+
+export default Index;

src/app/handlers/not-found.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+var NotFound = React.createClass({
+
+  render () {
+    return <h1>404 Not Found</h1>;
+  }
+
+});
+
+export default NotFound;

src/app/mixins/title.js

@@ -0,0 +1,27 @@
+var PortalComponentMixin = {
+  componentWillUnmount: function() {
+    this._unrenderLayer();
+    if(!this.props.portal) document.body.removeChild(this._target);
+  },
+  componentDidUpdate: function() {
+    this._renderLayer();
+  },
+  componentDidMount: function() {
+    if(this.props.portal) {
+      this._target = document.getElementById(this.props.portal);
+    } else {
+      this._target = document.createElement('div');
+      document.body.appendChild(this._target);
+    }
+    this._renderLayer();
+  },
+  _renderLayer: function() {
+    React.renderComponent(this.renderLayer(), this._target);
+  },
+  _unrenderLayer: function() {
+    React.unmountComponentAtNode(this._target);
+  },
+  render: function() {
+    return <title />;
+  }
+};

src/app/routes.js

@@ -0,0 +1,16 @@
+import React from "react";
+import Router from "react-router";
+import Application from "./handlers/application";
+import Index from "./handlers/index";
+import NotFound from "./handlers/not-found";
+
+var {DefaultRoute, Link, Route, RouteHandler, NotFoundRoute} = Router;
+
+var routes = [
+  <Route handler={Application} path="">
+    <DefaultRoute handler={Index} />
+  </Route>,
+  <NotFoundRoute name="not-found" handler={NotFound}/>
+];
+
+export default routes;

src/assets/favicon.ico

@@ -0,0 +1,7 @@
+import React from "react";
+import Router from "react-router";
+import routes from "./app/routes.js";
+
+Router.run(routes, Router.HistoryLocation, function (Handler) {
+  React.render(React.createElement(Handler, null), document.body);
+});

src/client.js

@@ -0,0 +1,36 @@
+var React = require('react');
+var Router = require('react-router');
+var routes = require("./app/routes.js");
+var express = require('express');
+var favicon = require('serve-favicon');
+var app = express();
+var {join} = require("path");
+
+app.use(favicon("build/public/favicon.ico"));
+app.use(express.static(join(__dirname, "public")));
+
+app.get('*', function(req, res) {
+  var path = req.url;
+  var router = Router.create({
+    routes: routes,
+    location: path,
+    onAbort: function (redirect) {
+      cb(redirect);
+    },
+    onError: function (err) {
+      console.log('Routing Error');
+      console.log(err);
+    }
+  });
+
+  router.run(function(Handler, state) {
+    if (state.routes[0].name === "not-found") {
+      res.status(404);
+    }
+    res.send("<!doctype html>" + React.renderToStaticMarkup(<Handler />));
+  });
+});
+
+app.listen(process.env.PORT || 5000, function() {
+  console.log("React router server listening on port 5000");
+});