Moved async dependency to ContextHelper. Added 'src' to webpack modulesDirectories.

Author: RickWong

package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "start": "supervisor dist/server",
     "localhost": "sleep 1; which open && open http://localhost:8000",
-    "browser": "sleep 6; concurrent 'npm run start' 'npm run localhost'",
+    "browser": "sleep 6; concurrent --kill-others 'npm run start' 'npm run localhost'",
     "build-server": "webpack --verbose --colors --display-error-details --config webpack.server.js",
     "build-client": "webpack --verbose --colors --display-error-details --config webpack.client.js",
     "build": "concurrent 'npm run build-client' 'npm run build-server'",

src/client.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Router from "react-router";
-import ContextHelper from "./helpers/ContextHelper";
-import routes from "./views/Routes";
+import ContextHelper from "helpers/ContextHelper";
+import routes from "views/Routes";
 
 /**
  * Enable Accessibility warnings on the client.
@@ -17,10 +17,11 @@ Router.run(routes, Router.HistoryLocation, (Handler) => {
 	/**
 	 * Get Client Context passed along by the server, and inject it.
 	 */
-	const clientContext = ContextHelper.getClientContext(window);
-	const ContextualHandler = ContextHelper.injectContext(Handler, clientContext);
+	const context = ContextHelper.getClientContext(window);
 
-	React.render(<ContextualHandler />, document.getElementById("react-root"));
+	ContextHelper.injectContext(Handler, context, (ContextualHandler) => {
+		React.render(<ContextualHandler />, document.getElementById("react-root"));
+	});
 });
 
 /**

src/helpers/ContextHelper.js

@@ -1,3 +1,4 @@
+import Async from "async";
 import React from "react";
 
 /**
@@ -17,7 +18,7 @@ const ContextMixin = {
 	},
 	getContext (key) {
 		if (!this.context) {
-			return null;
+			return undefined;
 		}
 
 		if (key === undefined) {
@@ -45,14 +46,14 @@ const ContextHelper = {
 			(k) => context.contextLoaders[k]
 		);
 	},
-	injectContext (Component, context) {
+	injectContext (Component, context, callbackFn) {
 		let childContextTypes = {};
 
 		Object.keys(context).map((key) => {
 			childContextTypes[key] = React.PropTypes.any
 		});
 
-		return React.createClass({
+		const ContextualComponent = React.createClass({
 			childContextTypes,
 			getChildContext () {
 				return context;
@@ -61,6 +62,21 @@ const ContextHelper = {
 				return <Component />;
 			}
 		});
+
+		if (__CLIENT__) {
+			callbackFn(ContextualComponent);
+			return;
+		}
+
+		/**
+		 * Fake-render the components without output so they can register context loaders.
+		 */
+		React.renderToString(<ContextualComponent />);
+		const contextLoaders = ContextHelper.getContextLoaders(context);
+
+		Async.parallel(contextLoaders, (error, result) => {
+			callbackFn(ContextualComponent);
+		});
 	},
 	getServerContext () {
 		let serverContext = {};

src/server.js

@@ -1,9 +1,8 @@
-import async from "async";
 import {Server} from "hapi";
 import React from "react";
 import Router from "react-router";
-import ContextHelper from "./helpers/ContextHelper";
-import routes from "./views/Routes";
+import ContextHelper from "helpers/ContextHelper";
+import routes from "views/Routes";
 
 /**
  * Start Hapi server on port 8000.
@@ -33,29 +32,23 @@ server.ext("onPreResponse", (request, reply) => {
 		return reply.continue();
 	}
 
-	Router.run(routes, request.path, (Handler) => {
+	Router.run(routes, request.path, (Handler, router) => {
 		/**
 		 * Prepare a unique Server Context per request, and inject it.
 		 */
-		const serverContext = ContextHelper.getServerContext();
-		serverContext.request = request;
-		const ContextualHandler = ContextHelper.injectContext(Handler, serverContext);
+		const context = ContextHelper.getServerContext();
+		context.request = request;
+		context.router = router;
 
-		/**
-		 * Fake-render the components without output so they can register context loaders.
-		 */
-		React.renderToString(<ContextualHandler />);
-		const loaders = ContextHelper.getContextLoaders(serverContext);
-
-		/**
-		 * Wait for all the registered callbacks and render for real, but this time with data.
-		 */
-		async.parallel(loaders, (error, results) => {
+		ContextHelper.injectContext(Handler, context, (ContextualHandler) => {
+			/**
+			 * Wait for all the registered callbacks and render for real, but this time with data.
+			 */
 			const rendered = React.renderToString(<ContextualHandler />);
-			const contextData = JSON.stringify(serverContext.contextData);
+			const contextData = JSON.stringify(context.contextData);
 			const webserver = process.env.NODE_ENV === "production" ? "" : "//localhost:8080";
 
-			const output =
+			const output = (
 				`<!doctype html>
 				<html lang="en-us">
 					<head>
@@ -68,7 +61,8 @@ server.ext("onPreResponse", (request, reply) => {
 						<script>window.CONTEXT_DATA = ${contextData};</script>
 						<script src="${webserver}/dist/client.js"></script>
 					</body>
-				</html>`;
+				</html>`
+			);
 
 			reply(output);
 		});

src/views/Main.js

@@ -1,14 +1,14 @@
 import React from "react";
 import InlineCss from "react-inline-css";
 import Superagent from "superagent";
-import ContextHelper from "../helpers/ContextHelper";
+import ContextHelper from "helpers/ContextHelper";
 
 /**
  * Main React application entry-point for both the server and client.
  *
  * @class Main
  */
-export default React.createClass({
+const Main = React.createClass({
 	mixins: [
 		ContextHelper.Mixin
 	],
@@ -151,3 +151,5 @@ export default React.createClass({
 		);
 	}
 });
+
+export default Main;

src/views/Routes.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Router, {Route, DefaultRoute} from "react-router";
-import Main from "./Main";
+import Main from "views/Main";
 
 /**
  * The React Routes for both the server and the client.

webpack.client.js

@@ -28,6 +28,15 @@ module.exports = {
 		]
 	},
 	resolve: {
+		modulesDirectories: [
+			"src",
+			"node_modules",
+			"web_modules"
+		],
 		extensions: ["", ".json", ".jsx", ".js"]
+	},
+	node:    {
+		__dirname: true,
+		fs:        'empty'
 	}
 };

webpack.server.js

@@ -25,10 +25,14 @@ module.exports = {
 		]
 	},
 	resolve: {
+		modulesDirectories: [
+			"src",
+			"node_modules",
+			"web_modules"
+		],
 		extensions: ["", ".json", ".jsx", ".js"]
 	},
 	node:    {
-		__dirname: true,
-		fs:        'empty'
+		__dirname: true
 	}
 };