feat: Add react isomorphic server

index.js

@@ -1,5 +1,10 @@
 import React from 'react'
 import { render } from 'react-dom'
-import App from './modules/App'
+import { Router, browserHistory } from 'react-router'
+// import routes and pass them into <Router/>
+import routes from './modules/routes'
 
-render(<App/>, document.getElementById('app'))
+render(
+  <Router routes={routes} history={browserHistory}/>,
+  document.getElementById('app')
+)

modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

modules/App.js

@@ -1,7 +1,25 @@
+import { Link } from 'react-router'
 import React from 'react'
+import NavLink from './NavLink'
+import Home from './Home'
+import { IndexLink } from 'react-router'
+
 
 export default React.createClass({
   render() {
-    return <div>Hello, React2 3 Router!</div>
+    return (
+      <div>
+        <h1>Ghettohub Issues</h1>
+        <ul role="nav">
+          <li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
+          <li><NavLink to="/about">About</NavLink></li>
+          <li><NavLink to="/repos">Repos</NavLink></li>
+        </ul>
+
+        {/* add this */}
+        {this.props.children || <Home/>}
+
+      </div>
+    )
   }
 })

modules/Home.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Home</div>
+  }
+})

modules/NavLink.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return <Link {...this.props} activeClassName="active"/>
+  }
+})

modules/Repo.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>{this.props.params.repoName}</h2>
+      </div>
+    )
+  }
+})

modules/Repos.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import NavLink from './NavLink'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>Repos</h2>
+
+        {/* add some links */}
+        <ul>
+          <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
+          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+        </ul>
+
+        {this.props.children}
+      </div>
+    )
+  }
+})

modules/Routes.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Route, IndexRoute } from 'react-router'
+import App from './App'
+import About from './About'
+import Repos from './Repos'
+import Repo from './Repo'
+import Home from './Home'
+
+module.exports = (
+  <Route path="/" component={App}>
+    <IndexRoute component={Home}/>
+    <Route path="/repos" component={Repos}>
+      <Route path="/repos/:userName/:repoName" component={Repo}/>
+    </Route>
+    <Route path="/about" component={About}/>
+  </Route>
+)

package.json

@@ -5,9 +5,17 @@
   "main": "index.js",
   "bin": "bin/webpack-dev-server.js",
   "scripts": {
-    "start": "webpack-dev-server  --inline --content-base --host=0.0.0.0 ."
+    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
+    "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback",
+    "start:prod": "npm run build && node server.bundle.js",
+    "build:client": "webpack",
+    "build:server": "webpack --config webpack.server.config.js",
+    "build": "npm run build:client && npm run build:server"
   },
   "dependencies": {
+    "compression": "^1.6.2",
+    "express": "^4.14.0",
+    "if-env": "^1.0.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-router": "^2.0.0"

public/index.css

@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}

index.html → public/index.html

@@ -3,4 +3,5 @@
 <meta charset=utf-8/>
 <title>My First React Router App</title>
 <div id=app></div>
-<script src="bundle.js"></script>
+<link rel="stylesheet" href="/index.css">
+<script src="/bundle.js"></script>