finished

Author: ryanwest91

index.js

@@ -2,27 +2,11 @@
 
 import React from 'react'
 import { render } from 'react-dom'
-import { Router, Route, browserHistory, IndexRoute } from 'react-router'
+import { Router, browserHistory } from 'react-router'
 
-import App from './modules/App'
-import About from './modules/About'
-import Repos from './modules/Repos'
-import Repo from './modules/Repo.js'
-import Home from './modules/Home.js'
+import routes from './modules/routes'
 
 render((
-	<Router history={browserHistory}>
-		<Route path="/" component={App}>
-
-			<IndexRoute component={Home}/>
-
-			<Route path="/about" component={About}/>
-
-			<Route path="/repos" component={Repos}>
-				<Route path="/repos/:userName/:repoName" component={Repo}/>
-			</Route>
-
-		</Route>
-	</Router>),
- 	document.getElementById('app')
+  <Router routes={routes} history={browserHistory}/>,
+  document.getElementById('app')
 )

modules/Repos.js

@@ -5,6 +5,21 @@ import { Link } from 'react-router'
 import NavLink from './NavLink.js'
 
 export default React.createClass({
+
+	contextTypes: {
+		router: React.PropTypes.object
+	},
+
+	handleSubmit(event){
+		event.preventDefault()
+		const userName = event.target.elements[0].value
+		const repo = event.target.elements[1].value
+		const path = `/repos/${userName}/${repo}`
+		// console.log(path)
+		this.context.router.push(path)
+	},
+
+
 	render(){
 		return(
 
@@ -17,6 +32,14 @@ export default React.createClass({
 					<li>
 						<NavLink to="/repos/facebook/react">React</NavLink>
 					</li>
+
+					<li>
+						<form onSubmit={this.handleSubmit}>
+							<input type="text" placeholder="userName"/> / {' '}
+							<input type="text" placeholder="repo"/>{' '}
+							<button type="submit">Go</button>
+						</form>
+					</li>
 				</ul>
 
 				{this.props.children}

modules/routes.js

@@ -0,0 +1,18 @@
+// modules/routes.js
+import React from 'react'
+import { Router, Route, browserHistory, 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_exchange.json

@@ -4,15 +4,20 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --inline --content-base ."
+    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
+    "start:dev": "webpack-dev-server --inline --content-base . --history-api-fallback",
+    "start:prod": "webpack && node server.js"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "react": "0.14.7",
     "react-dom": "0.14.7",
     "babel-runtime": "~6.2.4",
-    "lodash": "~3.4.0"
+    "lodash": "~3.4.0",
+    "compression": "~1.6.1",
+    "if-env": "~1.0.0",
+    "express": "~4.13.4"
   },
   "devDependencies": {
     "webpack": "^1.14.1",

index.css renamed to public/index.css

@@ -0,0 +1,60 @@
+import React from 'react'
+// we'll use this to render our app to an html string
+import { renderToString } from 'react-dom/server'
+// and these to match the url to routes and then render
+import { match, RouterContext } from 'react-router'
+import routes from './modules/routes'
+
+var express = require('express')
+var path = require('path')
+var compression = require('compression')
+
+var app = express()
+
+app.use(compression())
+// serve static stuff
+app.use(express.static(path.join(__dirname, 'public')))
+
+//send all requests to index.html
+app.get('*', (req, res) => {
+
+	match({routes: routes, location: req.url }, (err, redirect, props) => {
+		match({ routes: routes, location: req.url }, (err, redirect, props) => {
+		    // in here we can make some decisions all at once
+		    if (err) {
+		      // there was an error somewhere during route matching
+		      res.status(500).send(err.message)
+		    } else if (redirect) {
+		      // we haven't talked about `onEnter` hooks on routes, but before a
+		      // route is entered, it can redirect. Here we handle on the server.
+		      res.redirect(redirect.pathname + redirect.search)
+		    } else if (props) {
+		      // if we got props then we matched a route and can render
+		      const appHtml = renderToString(<RouterContext {...props}/>)
+		      res.send(renderPage(appHtml))
+		    } else {
+		      // no errors, no redirect, we just didn't match anything
+		      res.status(404).send('Not Found')
+		    }
+		  })
+	})
+
+})
+
+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>
+   `
+}
+
+var PORT = process.env.PORT || 8080
+app.listen(PORT, function(){
+
+	console.log('Production Express server running at localhost:' + PORT)
+})

index.html renamed to public/index.html

@@ -1,15 +1,24 @@
+var webpack = require('webpack')
+
+
 module.exports = {
   entry: './index.js',
 
   output: {
     filename: 'bundle.js',
-    publicPath: ''
+    path: 'public'
   },
 
   module: {
     loaders: [
       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
     ]
-  }
+  },
+
+  plugins: process.env.NODE_ENV === 'production' ? [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin()
+  ] : []
 }
 

server.js

@@ -0,0 +1,33 @@
+var fs = require('fs')
+var path = require('path')
+
+module.exports = {
+
+  entry: path.resolve(__dirname, 'server.js'),
+
+  output: {
+    filename: 'server.bundle.js'
+  },
+
+  target: 'node',
+
+  // keep node_module paths out of the bundle
+  externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
+    'react-dom/server'
+  ]).reduce(function (ext, mod) {
+    ext[mod] = 'commonjs ' + mod
+    return ext
+  }, {}),
+
+  node: {
+    __filename: true,
+    __dirname: true
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
+    ]
+  }
+
+}