WIP: Implementing React Server Side Rendering

00Base-Template/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "build": "webpack -p --progress",
     "test:lint": "eslint **/*.js",
-    "start": "node -r babel-core/register -r dotenv/config src/server/scripts/server"
+    "start": "node -r babel-core/register -r dotenv/config src/server/scripts/server",
+    "watch": "nodemon --watch src/server --watch .env --watch webpack.config.js --exec 'npm start'"
   },
   "author": "Chris Limbrick",
   "license": "ISC",
@@ -43,7 +44,9 @@
   },
   "babel": {
     "presets": [
-      "node6"
+      "es2015",
+      "react",
+      "stage-0"
     ]
   },
   "devDependencies": {
@@ -78,13 +81,11 @@
     "path": "0.12.7",
     "postcss-loader": "0.9.1",
     "react": "15.2.1",
-    "react-bootstrap": "0.30.7",
     "react-css-modules": "3.7.8",
     "react-dom": "15.2.1",
     "react-hot-loader": "3.0.0-beta.6",
     "react-redux": "4.4.5",
     "react-router": "4.0.0",
-    "react-router-bootstrap": "0.23.1",
     "react-router-redux": "5.0.0-alpha.4",
     "redux": "3.5.2",
     "redux-logger": "2.6.1",

00Base-Template/src/client/scripts/App.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 
 // Routes
 import Home from './routes/Home'
@@ -9,25 +9,22 @@ import NotFound from './routes/NotFound'
 // Components
 import Header from './components/Header'
 
-
 export default class App extends React.Component {
   constructor(props) {
     super(props)
   }
   render() {
     return (
-      <Router>
-        <div>
-          <Header />
-          <main>
-            <Switch>
-              <Route exact path="/" component={Home} />
-              <Route exact path="/typography" component={Typography} />
-              <Route component={NotFound}/>
-            </Switch>
-          </main>
-        </div>
-      </Router>
+      <div>
+        <Header />
+        <main>
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route exact path="/typography" component={Typography} />
+            <Route component={NotFound}/>
+          </Switch>
+        </main>
+      </div>
     )
   }
 }

00Base-Template/src/client/scripts/components/Header.js

@@ -1,35 +1,27 @@
 import React from 'react'
-import { Nav, NavItem, Input, Navbar, Button } from 'react-bootstrap'
-
-// @TODO
-// Add <Link to="/">Logo Goes Here</Link> for <Navbar.Brand>
-// react-router-bootstrap doesn't support react-router v4 yet
-// So we can't use import { LinkContainer } from 'react-router-bootstrap'
-// StackOverflow: http://tiny.cc/ad39jy
+import { Link } from 'react-router-dom'
 
 class Header extends React.Component {
   constructor(props) {
     super(props)
   }
   render() {
     return (
-        <Navbar className="navbar--no-margin-bottom">
-         <Navbar.Header>
-           <Navbar.Brand>
-             <a href="/">Base Template</a>
-           </Navbar.Brand>
-           <Navbar.Toggle />
-         </Navbar.Header>
-         <Navbar.Collapse>
-           <Nav>
-             <NavItem eventKey={1} href="/notfound">404 Page</NavItem>
-             <NavItem eventKey={2} href="/typography">Typography</NavItem>
-           </Nav>
-           <Navbar.Form pullRight>
-             <Button type="submit">Contact Us</Button>
-           </Navbar.Form>
-         </Navbar.Collapse>
-        </Navbar>
+      <nav className="navbar navbar-default navbar--no-margin-bottom">
+        <div className="container">
+          <div className="navbar-header">
+            <Link className="navbar-brand" to="/">Base Template</Link>
+          </div>
+          <ul className="nav navbar-nav navbar-right">
+            <li>
+              <Link to="typography">Typography</Link>
+            </li>
+            <li>
+              <Link to="notfound">404 Page</Link>
+            </li>
+          </ul>
+        </div>
+      </nav>
     )
   }
 }

00Base-Template/src/client/scripts/index.js

@@ -1,25 +1,29 @@
-import ReactDOM from 'react-dom'
 import React from 'react'
-import { Provider } from 'react-redux'
-import { ConnectedRouter } from 'react-router-redux'
-
-import createHistory from 'history/createBrowserHistory'
-const history = createHistory()
-
-// Containers
+import ReactDOM from 'react-dom'
+import { AppContainer } from 'react-hot-loader'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
+import '../styles/index.scss'
 
-// Store
-import store from './store/store'
-
-// App Entry Point
 const root = document.querySelector('.root');
 
-ReactDOM.render(
-  <Provider store={store}>
-    <ConnectedRouter history={history}>
-      <App />
-    </ConnectedRouter>
-  </Provider>,
-  root
-);
+// Wraps our App in AppContainer
+const render = (Component) => {
+  ReactDOM.render(
+    <BrowserRouter>
+      <AppContainer>
+        <Component/>
+      </AppContainer>
+    </BrowserRouter>,
+    root
+  );
+};
+
+// Renders our application
+render(App);
+
+// Checks if there have been changes and accepts them.
+// This activates HMR and refreshes modules in the browser
+if (module.hot) {
+  module.hot.accept();
+}

00Base-Template/src/client/scripts/root.js

@@ -0,0 +1,20 @@
+import ReactDOM from 'react-dom'
+import React from 'react'
+// import { Provider } from 'react-redux'
+// import { ConnectedRouter } from 'react-router-redux'
+import { BrowserRouter } from 'react-router-dom'
+// import createHistory from 'history/createBrowserHistory'
+import App from './App'
+// import store from './store/store'
+
+// const history = createHistory()
+
+export default class Root extends React.Component {
+  render() {
+    return (
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    )
+  }
+}

00Base-Template/src/client/scripts/routes/Home.js

@@ -1,65 +1,59 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import { fetchMessage } from './../actions/fetchMessage'
-import { Grid, Row, Col, Button, Jumbotron, ButtonToolbar } from 'react-bootstrap'
+// import { connect } from 'react-redux'
+// import { fetchMessage } from './../actions/fetchMessage'
 
 class Home extends React.Component {
   constructor(props) {
     super(props)
   }
   componentWillMount() {
-    this.props.dispatch(fetchMessage());
+    // this.props.dispatch(fetchMessage());
   }
   render() {
-    if (this.props.message === undefined) {
-      return (
-        <div>Loading...</div>
-      )
-    }
-    else {
-      return (
-        <div className="home">
-          <Jumbotron>
-            <div className="container text-center">
-              <h1>Base template</h1>
-              <p>{this.props.message}</p>
-              <ButtonToolbar className="make-inline-block">
-                <Button bsStyle="primary">Get Started</Button>
-                <Button bsStyle="success">Learn More</Button>
-              </ButtonToolbar>
+    return (
+      <div className="home">
+        <div className="jumbotron">
+          <div className="container text-center">
+            <h1>Base Template</h1>
+            <p>Something Creative Goes Here</p>
+              <div>
+                <button type="button" className="btn btn-primary">Get Started</button>
+                <button type="button" className="btn btn-success">Learn More</button>
+              </div>
+          </div>
+        </div>
+        <div className="container">
+          <div className="row">
+            <div className="col-md-4">
+              <h3>Heading 3</h3>
+              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nulla tortor. Duis id rutrum dolor. Fusce eu quam viverra, tristique justo quis, rhoncus augue. In id risus euismod, finibus dui eget.</div>
+            </div>
+            <div className="col-md-4">
+              <h3>Heading 3</h3>
+              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nulla tortor. Duis id rutrum dolor. Fusce eu quam viverra, tristique justo quis, rhoncus augue. In id risus euismod, finibus dui eget.</div>
+            </div>
+            <div className="col-md-4">
+              <h3>Heading 3</h3>
+              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nulla tortor. Duis id rutrum dolor. Fusce eu quam viverra, tristique justo quis, rhoncus augue. In id risus euismod, finibus dui eget.</div>
             </div>
-          </Jumbotron>
-          <Grid>
-            <Row>
-              <Col md={4}>
-                <h3>Heading 3</h3>
-                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nulla tortor. Duis id rutrum dolor. Fusce eu quam viverra, tristique justo quis, rhoncus augue. In id risus euismod, finibus dui eget.</div>
-              </Col>
-              <Col md={4}>
-                <h3>Heading 3</h3>
-                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nulla tortor. Duis id rutrum dolor. Fusce eu quam viverra, tristique justo quis, rhoncus augue. In id risus euismod, finibus dui eget.</div>
-              </Col>
-              <Col md={4}>
-                <h3>Heading 3</h3>
-                  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nulla tortor. Duis id rutrum dolor. Fusce eu quam viverra, tristique justo quis, rhoncus augue. In id risus euismod, finibus dui eget.</div>
-              </Col>
-            </Row>
-          </Grid>
+          </div>
         </div>
-      )
-    }
+      </div>
+    )
   }
 }
 
-Home.propTypes = {
-  message: React.PropTypes.string
-}
+// Home.propTypes = {
+//   message: React.PropTypes.string
+// }
+//
+// const mapStateToProps = (store) => {
+//   return {
+//     message: store.retrieveMessage.message,
+//     dispatch: store
+//   }
+// }
 
-const mapStateToProps = (store) => {
-  return {
-    message: store.retrieveMessage.message,
-    dispatch: store
-  }
-}
+// export default connect(mapStateToProps)(Home)
 
-export default connect(mapStateToProps)(Home)
+export default Home

00Base-Template/src/client/scripts/routes/NotFound.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Link } from 'react-router'
 
 export default class NotFound extends React.Component {
   render() {

00Base-Template/src/client/scripts/routes/Typography.js

@@ -1,21 +1,20 @@
 import React from 'react'
-import { Grid, Row, Col, Button, Jumbotron, ButtonToolbar } from 'react-bootstrap'
 
 class Typography extends React.Component {
   constructor(props) {
     super(props)
   }
   render() {
     return (
-      <div className="typography">
-        <Jumbotron>
+      <div className="page-typography">
+        <div className="jumbotron">
           <div className="container text-center">
             <h1>Typography</h1>
           </div>
-        </Jumbotron>
-        <Grid>
-          <Row>
-            <Col md={8}>
+        </div>
+        <div className="container">
+          <div className="row">
+            <div className="col-md-8">
               <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
               <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
               <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
@@ -30,9 +29,9 @@ class Typography extends React.Component {
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem risus, volutpat nec nunc eu, placerat pellentesque metus. Morbi nec magna pharetra, tempus libero non, fermentum dolor. Nunc non lacinia libero. Fusce interdum ante in suscipit maximus. Fusce condimentum dolor nec orci faucibus malesuada pulvinar vitae quam. Nulla vitae nunc vel nisl eleifend volutpat. Quisque volutpat neque neque, ac lacinia massa iaculis id. Vivamus tempor pulvinar scelerisque. Ut blandit sit amet orci et egestas. Cras posuere rutrum pulvinar. In egestas tempor sapien eu sagittis. Vestibulum convallis urna nec vulputate imperdiet.
               </p>
-            </Col>
-          </Row>
-        </Grid>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }