add basic server side rendering

Author: stevenkaspar

gulpfile.js

@@ -13,10 +13,11 @@ const paths = {
 	* paths to files that should restart app
 	*/
 	server_files: [
-		'models/**/*.js',
-		'routes/**/*.js',
+		'models/**/*',
+		'routes/**/*',
 		'keystone.js',
-		'package.json'
+		'package.json',
+    '!routes/redux-render/**/*.js'
 	],
 	/**
 	 * gulp-sass configuration
@@ -36,7 +37,15 @@ const paths = {
 			'public/js/src/**/*',
 			'webpack.config.js'
 		]
-	}
+	},
+	'webpack-server': {
+		config: 'webpack-server.config.js',
+		watch_files: [
+			'public/js/src/**/*',
+			'routes/redux-render/index.jsx',
+			'webpack-server.config.js'
+		]
+	},
 };
 
 /** starting and restarting keystone app **/
@@ -110,6 +119,27 @@ gulp.task('webpack', done => {
 	return webpack_process;
 });
 
+/** webpack-server **/
+gulp.task('watch-webpack-server', () => {
+	gulp.watch(paths['webpack-server'].watch_files, ['webpack-server']);
+});
+gulp.task('webpack-server', done => {
+	var webpack_process = spawn('./node_modules/.bin/webpack', [
+		'--config',
+		paths['webpack-server'].config
+	]);
+	webpack_process.on('close', (code, signal) => {
+		done();
+	});
+	webpack_process.stdout.on('data', (data) => {
+		console.log(`${data}`);
+	});
+	webpack_process.stderr.on('data', (data) => {
+		console.log(`Error: ${data}`);
+	});
+	return webpack_process;
+});
+
 
 /** gulp task setup **/
-gulp.task('default', ['watch-app', 'watch-sass']);//, 'watch-webpack']);
+gulp.task('default', ['watch-app', 'watch-sass', 'watch-webpack-server']);//, 'watch-webpack']);

public/js/src/components/Admin.js

@@ -12,7 +12,7 @@ export default class Admin extends React.Component {
   }
 
   render(){
-    if(this.props.user.is_fetching){
+    if(Object.keys(this.props.user.user).length === 0 && this.props.user.is_fetching){
       return (
         <div className='container-fluid'>
           <div className='row pb-5'>

public/js/src/containers/App.js

@@ -17,6 +17,12 @@ import Admin from './Admin'
 
 import style from '../../../styles/src/site.scss'
 
+// Grab the state from a global variable injected into the server-generated HTML
+const preloaded_state = window.__PRELOADED_STATE__
+
+// Allow the passed state to be garbage-collected
+delete window.__PRELOADED_STATE__
+
 export default class App extends React.Component {
   constructor(){
     super()
@@ -29,6 +35,7 @@ export default class App extends React.Component {
 
     this.store = createStore(
       reducer,
+      preloaded_state,
       applyMiddleware(...middleware)
     )
 

public/js/src/home.js

@@ -1,6 +1,6 @@
 // globally import bootstrap
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { hydrate } from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 
 import App from './containers/App'
@@ -9,7 +9,7 @@ const home_elem = document.getElementById('Home')
 
 const render = Component => {
   const NextApp = require('./containers/App').default
-  ReactDOM.render(
+  hydrate(
     <AppContainer>
       <NextApp />
     </AppContainer>, home_elem

routes/index.js

@@ -32,6 +32,8 @@ const routes = {
   api:   importRoutes('./api')
 }
 
+const reduxRender = require('./redux-render/index')
+
 // Setup Route Bindings
 exports = module.exports = (app) => {
 
@@ -54,6 +56,19 @@ exports = module.exports = (app) => {
     }))
   }
 
+  app.use('/app', async (req, res, next) => {
+    const User = keystone.list('User')
+    let state = {
+      user: {
+        user: req.user || {}
+      },
+      users: {
+        items: await User.model.find({})
+      }
+    }
+    reduxRender(state, req, res, next)
+  })
+
   app.get('/signin',  routes.views.signin)
   app.get('/signout', middleware.signout, routes.views.signin)
 	app.get('/reset-password/:hash', routes.views.reset_password)