Skip to content

Instantly share code, notes, and snippets.

@btholt
Created March 6, 2016 23:15
Show Gist options
  • Save btholt/746b4c6b4ca57454e3d0 to your computer and use it in GitHub Desktop.
Save btholt/746b4c6b4ca57454e3d0 to your computer and use it in GitHub Desktop.
require("babel-register")
var express = require('express')
var React = require('react')
var ReactDOMServer = require('react-dom/server')
var ReactRouter = require('react-router')
var match = ReactRouter.match
var RouterContext = ReactRouter.RouterContext
var ReactRedux = require('react-redux')
var Provider = ReactRedux.Provider
var Layout = require('./js/Layout.jsx')
var Store = require('./js/Store.jsx')
var store = Store.store
var _ = require('lodash')
var fs = require('fs')
var port = 5050
var baseTemplate = fs.readFileSync('./index.html')
var template = _.template(baseTemplate)
var ClientApp = require('./js/ClientApp.jsx')
var routes = ClientApp.Routes
var app = express()
app.use('/public', express.static('./public'))
app.use((req, res) => {
// Note that req.url here should be the full URL path from
// the original request, including the query string.
match({ routes: routes, location: req.url }, (error, redirectLocation, renderProps) => {
console.log(error, redirectLocation, renderProps)
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
// You can also check renderProps.components or renderProps.routes for
// your "not found" component or route respectively, and send a 404 as
// below, if you're using a catch-all route.
var body = ReactDOMServer.renderToString(
React.createElement(Provider,{store},
React.createElement(Layout, {},
React.createElement(RouterContext,renderProps)
)
)
)
res.status(200).send(template({}))
} else {
res.status(404).send('Not found')
}
})
});
console.log('listening on ' + port)
app.listen(port)
const React = require('react')
const Landing = require('./Landing')
const Search = require('./Search')
const Layout = require('./Layout')
const Details = require('./Details')
const ReactRouter = require('react-router')
const data = require('../public/data')
const { Router, Route, browserHistory, IndexRoute } = ReactRouter
const Store = require('./Store')
const { store } = Store
const reactRedux = require('react-redux')
const { Provider } = reactRedux
const myRoutes = (props) => (
<Route path='/' component={Layout}>
<IndexRoute component={Landing} />
<Route path='/search' component={Search} shows={shows} />
<Route path='/details/:id' component={Details} onEnter={props.assignShow} />
</Route>
)
class App extends React.Component {
constructor (props) {
super(props)
this.assignShow = this.assignShow.bind(this)
}
assignShow (nextState, replace) {
const show = data.shows[nextState.params.id]
if (!show) {
return replace('/')
}
Object.assign(nextState.params, show)
return nextState
}
render () {
const shows = data.shows || []
return (
<Provider store={store}>
<Router history={browserHistory}>
{myRoutes({myRoutes: this.assignShow})}
</Router>
</Provider>
)
}
}
App.Routes = myRoutes
module.exports = App
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment