lesson complete

r2fresh · r2fresh · commit 5731fb54ea98 · 2016-10-20T16:53:11.000+09:00
diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js
@@ -3,20 +3,8 @@ import { render } from 'react-dom'
 import App from './modules/App'
 import { Router, Route, hashHistory, IndexRoute, browserHistory} from 'react-router';
 
-import About from './modules/About';
-import Repos from './modules/Repos';
-import Repo from './modules/Repo'
-import Home from './modules/Home'
+import routes from './modules/routes';
 
-render((
-    <Router history={hashHistory}>
-        <Route path="/" component={App}>
-            <IndexRoute component={Home}/>
-            <Route path="/repos" component={Repos}>
-                {/* add this new route*/}
-                <Route path="/repos/:userName/:repoName" component={Repo}/>
-            </Route>
-            <Route path="/about" component={About}/>
-        </Route>
-    </Router>
-), document.getElementById('app'))
+render(
+    <Router routes={routes} history={hashHistory}/>
+, document.getElementById('app'))
diff --git a/lessons/01-setting-up/package.json b/lessons/01-setting-up/package.json
@@ -4,10 +4,13 @@
   "description": "",
   "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:prod" : "webpack && node server.js"
-  },
+        "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"
+    },
   "author": "",
   "license": "ISC",
   "dependencies": {
diff --git a/lessons/01-setting-up/server.js b/lessons/01-setting-up/server.js
@@ -1,20 +1,48 @@
-var express = require('express')
-var path = require('path')
-var compression = require('compression')
+import express from 'express'
+import path from 'path'
+import compression from 'compression'
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { match, RouterContext } from 'react-router'
+import routes from './modules/routes'
 
 var app = express()
 
 app.use(compression())
 
 // serve our static stuff like index.css
-app.use(express.static(path.join(__dirname, 'public')))
+app.use(express.static(path.join(__dirname, 'public'), {index: false}))
 
-app.get('*', function(req, res) {
-    res.sendFile(path.join(__dirname, 'public', 'index.html'))
+// send all requests to index.html so browserHistory works
+app.get('*', (req, res) => {
+  match({ routes, location: req.url }, (err, redirect, props) => {
+    if (err) {
+      res.status(500).send(err.message)
+    } else if (redirect) {
+      res.redirect(redirect.pathname + redirect.search)
+    } else if (props) {
+      // hey we made it!
+      const appHtml = renderToString(<RouterContext {...props}/>)
+      res.send(renderPage(appHtml))
+    } else {
+      res.status(404).send('Not Found')
+    }
+  })
 })
 
-var PORT = process.env.PORT || 8080
+function renderPage(appHtml) {
+  return `
+    <!doctype html public="storage">
+    <html>
+    <meta charset=utf-8/>
+    <title>My First React Router App</title>
+    <link rel=stylesheet href=/index.css>
+    <div id=app>${appHtml}</div>
+    <script src="/bundle.js"></script>
+   `
+}
 
-app.listen(PORT, function(){
-    console.log('Production Express server running at localhost:' + PORT)
+var PORT = process.env.PORT || 8080
+app.listen(PORT, function() {
+  console.log('Production Express server running at localhost:' + PORT)
 })
