react-redux-boilerplate/server.jsx at master · deepakdaffodil/react-redux-boilerplate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import express from 'express'
import React from 'react'
import {renderToString} from 'react-dom/server'
import {match, RouterContext} from 'react-router'
import routes from 'routes'

import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import * as reducers from 'reducers'

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const app = express()

app.use((req, res) => {
  const reducer = combineReducers(reducers)
  const store = createStore(reducer)

  match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
    if(error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      const InitialComponent = (
        <MuiThemeProvider>
          <Provider store={store}>
            <RouterContext {...renderProps} />
          </Provider>
        </MuiThemeProvider>
      )
      const componentHTML = renderToString(InitialComponent)
      const initialState = store.getState()
      const HTML = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <title>Isomorphic React Redux</title>
          <script type="application/javascript">
            window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
          </script>
        </head>
        <body>
          <div id="app">${componentHTML}</div>
          <script src="/bundle.js"></script>
        </body>
        </html>
      `
      res.end(HTML)
      // res.status(200).send(renderToString(<RouterContext {...renderProps} />))
    } else {
      res.status(404).send('Not found')
    }
  })
})

// app.use((req, res) => {
//   const HTML = `
//   <!DOCTYPE html>
//   <html lang="en">
//   <head>
//     <title>Isomorphic React Redux</title>
//   </head>
//   <body>
//     <div id="app"></div>
//     <script src="/build/bundle.js"></script>
//   </body>
//   </html>
//   `
//
//   res.end(HTML)
// })

export default app