Feat: implement server side rendering with example

RyanCCollins · RyanCCollins · commit a50589ac5305 · 2016-09-26T15:52:30.000-04:00
diff --git a/app/src/components/App/index.js b/app/src/components/App/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as actionCreators from './actions';
-import { Navbar } from 'components';
+import { Navbar } from '../../components';
 
 const Main = (props) => (
   <div>
diff --git a/app/src/components/LogoImage/index.js b/app/src/components/LogoImage/index.js
@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-
 import styles from './index.module.scss';
 import cssModules from 'react-css-modules';
 
diff --git a/app/src/components/Navbar/index.js b/app/src/components/Navbar/index.js
@@ -25,7 +25,7 @@ const Navbar = () => (
         <Anchor href="#">
           Third
         </Anchor>
-        <Search dropAlign={{ right: 'right'}} />
+        <Search dropAlign={{ right: 'right' }} />
       </Menu>
     </Header>
   </div>
diff --git a/app/src/containers/FeatureFirstContainer/index.js b/app/src/containers/FeatureFirstContainer/index.js
@@ -3,7 +3,7 @@ import React, { PropTypes, Component } from 'react';
 import {
   LogoImage,
   Header,
-} from 'components';
+} from '../../components';
 /* eslint-enable import/no-unresolved */
 import styles from './index.module.scss';
 import cssModules from 'react-css-modules';
diff --git a/app/src/index.js b/app/src/index.js
@@ -3,8 +3,8 @@ import React from 'react';
 /* eslint-enable */
 import { render } from 'react-dom';
 import RouterApp from './routes';
-import { history } from './store/store';
-import { routes } from './utils/routes';
+import { history } from './store';
+import { routes } from './routes';
 import { match } from 'react-router';
 import '../styles/styles.scss';
 
diff --git a/app/src/reducers.js b/app/src/reducers.js
@@ -3,7 +3,7 @@ import { routerReducer } from 'react-router-redux';
 import { reducer as formReducer } from 'redux-form';
 
 // Import all of your reducers here:
-import featureComponent from 'containers/FeatureFirstContainer/reducer';
+import featureComponent from './containers/FeatureFirstContainer/reducer';
 
 const rootReducer = combineReducers({
   // Apply all of the reducers here.
diff --git a/app/src/routes.js b/app/src/routes.js
@@ -3,8 +3,7 @@ import { Router, Route, IndexRoute } from 'react-router';
 import { Provider } from 'react-redux';
 import store, { history } from './store';
 /* eslint-disable */
-import App from 'components/App';
-import * as Pages from 'pages';
+import App from './components/App';
 /* eslint-enable */
 
 if (typeof module !== 'undefined' && module.require) {
diff --git a/app/src/store.js b/app/src/store.js
@@ -29,9 +29,9 @@ if (isDeveloping) {
 /* https://github.com/gaearon/redux-devtools */
 /* https://medium.com/@meagle/understanding-87566abcfb7a */
 const enhancers = [];
-const devToolsExtension = window.devToolsExtension;
 if (isClient && isDeveloping) {
   if (typeof devToolsExtension === 'function') {
+    const devToolsExtension = window.devToolsExtension;
     enhancers.push(devToolsExtension());
   }
 }
@@ -52,7 +52,8 @@ const store = createStore(
 );
 
 /* See: https://github.com/reactjs/react-router-redux/issues/305 */
-export const history = syncHistoryWithStore(browserHistory, store);
+export const history = isClient ?
+  syncHistoryWithStore(browserHistory, store) : undefined;
 
 /* Hot reloading of reducers.  How futuristic!! */
 if (module.hot) {
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "test": {
       "plugins": [
         [
-          "babel-plugin-webpack-loaders", {
+          "babel-plugin-webpack-loaders",
+          {
             "config": "./config/testing/webpack.test.config.js",
             "verbose": false
           }
@@ -102,6 +103,7 @@
     "jest-cli": "^15.1.1",
     "json-loader": "^0.5.4",
     "minimist": "^1.2.0",
+    "node-ensure": "0.0.0",
     "node-sass": "^3.4.2",
     "react": "^15.1.0",
     "react-addons-css-transition-group": "^15.2.1",
diff --git a/server.js b/server.js
@@ -1,2 +1,3 @@
 require('babel-core/register');
+require('./server/utils/ignoreAssets');
 var app = require('./server/app');
diff --git a/server/app.js b/server/app.js
@@ -29,7 +29,7 @@ app.use((req, res) => {
           </Provider>
         );
         res.status(200)
-          .send(createTemplate(body, store.getState(), mainHash, vendorHash));
+          .send(createTemplate(body, store.getState()));
       } else {
         res.status(400).send('Not Found 🤔');
       }
diff --git a/server/public/index.html b/server/public/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scalable React Boilerplate</title><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,300,700|Lato:400,300,700" rel="stylesheet"></head><body><div id="app"></div><script type="text/javascript" src="/vendor.26f395b8adac3b23a24c.js"></script><script type="text/javascript" src="/main.deb9d58e7f79a293f5d5.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scalable React Boilerplate</title><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,300,700|Lato:400,300,700" rel="stylesheet"></head><body><div id="app"></div><script type="text/javascript" src="/vendor.26f395b8adac3b23a24c.js"></script><script type="text/javascript" src="/main.f28b056b2c4e5b60e761.js"></script></body></html>
diff --git a/server/public/main.1e58d1cb696f4b75ca7b.js b/server/public/main.1e58d1cb696f4b75ca7b.js
diff --git a/server/public/main.d8260709670c36ca8722.js b/server/public/main.d8260709670c36ca8722.js
diff --git a/server/public/main.deb9d58e7f79a293f5d5.js b/server/public/main.deb9d58e7f79a293f5d5.js
diff --git a/server/public/main.f28b056b2c4e5b60e761.js b/server/public/main.f28b056b2c4e5b60e761.js
diff --git a/server/utils/ignoreAssets.js b/server/utils/ignoreAssets.js
@@ -0,0 +1,14 @@
+(function() {
+  require.extensions['.scss'] = () => {
+    return;
+  };
+  require.extensions['.css'] = () => {
+    return;
+  };
+  require.extensions['.png'] = () => {
+    return;
+  };
+  require.extensions['.jpg'] = () => {
+    return;
+  };
+})();

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import React, { PropTypes } from 'react';`
`2`		`-`
`3`	`2`	`import styles from './index.module.scss';`
`4`	`3`	`import cssModules from 'react-css-modules';`
`5`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`require('babel-core/register');`
	`2`	`+require('./server/utils/ignoreAssets');`
`2`	`3`	`var app = require('./server/app');`