Root other than "/" supported ("sampleapp" is set as an example). "--inline" removed to disable automatic refresh. "webpack-dev-server" host set to "0.0.0.0".

Author: rferrerme

README.md

@@ -1,6 +1,12 @@
 React Router Tutorial
 =====================
 
+This forked repository contains changes in [Lesson 13 - Server Rendering](/lessons/13-server-rendering/). That code corresponds actually to the result of [Lesson 12 - Navigating](/lessons/12-navigating/), which can be considered the end of the tutorial if you exclude the Server Rendering part.
+
+The changes enable the deployment in a different root other than "/". That would be useful if you are e.g. composing multiple servers and you want them to have different roots.
+
+--
+
 Quick lessons for getting up-to-speed with React Router.
 
 See [Lesson 1 - Setting Up](/lessons/01-setting-up/) to get started.

lessons/13-server-rendering/README.md

@@ -1,5 +1,11 @@
 # Server Rendering
 
+This forked repository contains changes that enable the deployment in a different root other than "/". That would be useful if you are e.g. composing multiple servers and you want them to have different roots. "/sampleapp" is the root used here as an example.
+
+Remember that the code here is actually the one corresponding to the result of [Lesson 12 - Navigating](/lessons/12-navigating/).
+
+--
+
 Alright, first things first. Server rendering, at its core is a simple
 concept in React.
 

lessons/13-server-rendering/index.js

@@ -6,15 +6,16 @@ import About from './modules/About'
 import Repos from './modules/Repos'
 import Repo from './modules/Repo'
 import Home from './modules/Home'
+import { addRoot } from './modules/Root'
 
 render((
   <Router history={browserHistory}>
-    <Route path="/" component={App}>
+    <Route path={addRoot("/")} component={App}>
       <IndexRoute component={Home}/>
-      <Route path="/repos" component={Repos}>
-        <Route path="/repos/:userName/:repoName" component={Repo}/>
+      <Route path={addRoot("/repos")} component={Repos}>
+        <Route path={addRoot("/repos/:userName/:repoName")} component={Repo}/>
       </Route>
-      <Route path="/about" component={About}/>
+      <Route path={addRoot("/about")} component={About}/>
     </Route>
   </Router>
 ), document.getElementById('app'))

lessons/13-server-rendering/modules/App.js

@@ -1,15 +1,16 @@
 import React from 'react'
 import NavLink from './NavLink'
+import { addRoot } from './Root'
 
 export default React.createClass({
   render() {
     return (
       <div>
         <h1>React Router Tutorial</h1>
         <ul role="nav">
-          <li><NavLink to="/" onlyActiveOnIndex>Home</NavLink></li>
-          <li><NavLink to="/about">About</NavLink></li>
-          <li><NavLink to="/repos">Repos</NavLink></li>
+          <li><NavLink to={addRoot("/")} onlyActiveOnIndex>Home</NavLink></li>
+          <li><NavLink to={addRoot("/about")}>About</NavLink></li>
+          <li><NavLink to={addRoot("/repos")}>Repos</NavLink></li>
         </ul>
         {this.props.children}
       </div>

lessons/13-server-rendering/modules/Repos.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import NavLink from './NavLink'
+import { addRoot } from './Root'
 
 export default React.createClass({
   contextTypes: {
@@ -10,7 +11,7 @@ export default React.createClass({
     event.preventDefault()
     const userName = event.target.elements[0].value
     const repo = event.target.elements[1].value
-    const path = `/repos/${userName}/${repo}`
+    const path = addRoot(`/repos/${userName}/${repo}`)
     this.context.router.push(path)
   },
 
@@ -19,8 +20,8 @@ export default React.createClass({
       <div>
         <h2>Repos</h2>
         <ul>
-          <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
-          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+          <li><NavLink to={addRoot("/repos/reactjs/react-router")}>React Router</NavLink></li>
+          <li><NavLink to={addRoot("/repos/facebook/react")}>React</NavLink></li>
           <li>
             <form onSubmit={this.handleSubmit}>
               <input type="text" placeholder="userName"/> / {' '}

lessons/13-server-rendering/modules/Root.js

@@ -0,0 +1,9 @@
+// Do not end with '/'
+var root = '/sampleapp'
+
+export function getRoot() {
+    return root
+}
+export function addRoot(path) {
+    return root + path
+}

lessons/13-server-rendering/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "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:dev": "webpack-dev-server --content-base public/ --history-api-fallback --host 0.0.0.0",
     "start:prod": "webpack && node server.js"
   },
   "author": "",

lessons/13-server-rendering/public/index.html

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

lessons/13-server-rendering/public/index.css renamed to lessons/13-server-rendering/public/sampleapp/index.css

@@ -2,6 +2,8 @@ var express = require('express')
 var path = require('path')
 var compression = require('compression')
 
+var root = '/sampleapp'
+
 var app = express()
 
 app.use(compression())
@@ -10,11 +12,11 @@ app.use(compression())
 app.use(express.static(path.join(__dirname, 'public')))
 
 // send all requests to index.html so browserHistory works
-app.get('*', function (req, res) {
+app.get(root + '/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'public', 'index.html'))
 })
 
 var PORT = process.env.PORT || 8080
 app.listen(PORT, function() {
-  console.log('Production Express server running at localhost:' + PORT)
+  console.log('Production Express server running at 0.0.0.0:' + PORT)
 })

lessons/13-server-rendering/server.js

@@ -1,12 +1,14 @@
 var webpack = require('webpack')
 
+var root = '/sampleapp'
+
 module.exports = {
   entry: './index.js',
 
   output: {
-    path: 'public',
+    path: 'public' + root,
     filename: 'bundle.js',
-    publicPath: '/'
+    publicPath: root + '/'
   },
 
   plugins: process.env.NODE_ENV === 'production' ? [