fix SSR

Author: MacKentoch

.babelrc

@@ -16,13 +16,6 @@
         "react-optimize"
       ],
       "comments": false
-    },
-    "server": {
-      "presets": [
-        "react-optimize",
-        "babili"
-      ],
-      "comments": false
     }
   }
 }

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "typeAcquisition": {
+    "include": [
+      "react",
+      "redux",
+      "react-router",
+      "immutable"
+    ]
+  }
+}

package.json

@@ -4,7 +4,7 @@
   "description": "React + React-Router + Redux + ImmutableJS + Bootstrap with with Server side rendering, Hot Reload and redux-devtools STARTER",
   "main": "src/index.js",
   "engines": {
-    "node": "8.1.4",
+    "node": ">=8.1.4",
     "npm": ">=5.3.0",
     "yarn": ">=0.27.5"
   },
@@ -17,8 +17,8 @@
     "start": "cross-env NODE_ENV=dev node server.hot.reload",
     "serve-spa-dev": "npm run dev && nodemon ./src/server/SPA/index.js",
     "serve-spa-prod": "npm run prod && node ./src/server/SPA/index.js",
-    "build-ssr": "cross-env NODE_ENV=server webpack --color --config webpack.server.ssr.config.js",
-    "serve-ssr": "npm run build-ssr && node ./src/server/SSR/index.js"
+    "build-ssr": "cross-env NODE_ENV=production  webpack --color --config webpack.server.ssr.config.js",
+    "serve-ssr": "npm run build-ssr && cross-env NODE_ENV=production node ./src/server/SSR/index.js"
   },
   "keywords": [
     "react",
@@ -35,7 +35,7 @@
     "webpack",
     "webpack3",
     "hot-reload",
-    "redux-devtools",
+    "redux-devtools-extension",
     "devtools"
   ],
   "repository": {

src/server/SSR/index.js

@@ -19,10 +19,18 @@ const morgan        = require('morgan');
 import React              from 'react';
 import { renderToString } from 'react-dom/server';
 import moment             from 'moment';
-import { StaticRouter }   from 'react-router';
+import {
+  StaticRouter,
+  Switch,
+  Route
+}                         from 'react-router';
 import { Provider }       from 'react-redux';
 import configureStore     from '../../../app/redux/store/configureStore';
 import App                from '../../../app/containers/app/App';
+import ScrollToTop        from '../../../app/components/scrollToTop/ScrollToTop';
+import Login              from '../../../app/views/login';
+import PageNotFound       from '../../../app/views/pageNotFound/PageNotFound'; // not connected to redux (no index.js)
+import LogoutRoute        from '../../../app/components/logoutRoute/LogoutRoute';
 
 
 const DOCS_PATH = '../../../../docs';
@@ -47,7 +55,7 @@ app.use(morgan('combined'));
 
 app.use('/assets', express.static(path.resolve(__dirname, DOCS_PATH, 'public/assets/')));
 
-// IMPORTANT: '/*' and not '/' 
+// IMPORTANT: '/*' and not '/'
 // since you want browser refresh (= first render) to work from any route of the application
 app.get('/*', serverRender);
 
@@ -104,7 +112,7 @@ async function serverRender(req, res) {
     const response        = await fakeFetch();
     const { info }        = response;
     const currentTime     = moment().format();
-    const currentState    = store.getState(); 
+    const currentState    = store.getState();
 
     const currentViewsState = currentState.get('views');
     const updatedViewState  = currentViewsState
@@ -131,7 +139,14 @@ async function serverRender(req, res) {
         <StaticRouter
           location={location}
           context={context}>
-          <App />
+          <ScrollToTop>
+            <Switch>
+              <Route exact path="/login" component={Login} />
+              <App />
+              <LogoutRoute path="/logout" />
+              <Route component={PageNotFound} />
+            </Switch>
+          </ScrollToTop>
         </StaticRouter>
       </Provider>
     );
@@ -163,15 +178,15 @@ async function serverRender(req, res) {
   //   .then(
   //     ({ info }) => {
   //       const currentTime     = moment().format();
-  //       const currentState    = store.getState(); 
-        
+  //       const currentState    = store.getState();
+
   //       const currentViewsState = currentState.get('views');
   //       const updatedViewState  = currentViewsState
   //                                 .set('somePropFromServer', info)
   //                                 .set('serverTime', currentTime);
 
   //       const preWarmedState  = currentState.set('views', updatedViewState);
-        
+
   //       // //JS would be then:
   //       // preWarmedState = {
   //       //   ...currentState,
@@ -184,7 +199,7 @@ async function serverRender(req, res) {
 
   //       // update store to be preloaded:
   //       store = configureStore(preWarmedState);
-        
+
   //       const InitialView = (
   //         <Provider store={store}>
   //           <StaticRouter
@@ -228,8 +243,8 @@ function renderFullPage(html, preloadedState = '') {
   // </section>
   // will throw warning related to: https://stackoverflow.com/questions/34060968/react-warning-render
   //
-  // so write this way to fix: 
-  // <section id="root">${html}</section> 
+  // so write this way to fix:
+  // <section id="root">${html}</section>
   const indexHtml = {
     template: `
     <!DOCTYPE html>

src/server/SSR/src/server.js

@@ -53,7 +53,7 @@ const config = {
       },
       {
         test: /\.css$/,
-        use:  SPLIT_STYLE 
+        use:  SPLIT_STYLE
           ? ExtractTextPlugin.extract({
             fallback: 'style-loader',
             use: [
@@ -69,7 +69,7 @@ const config = {
       },
       {
         test: /\.scss$/,
-        use:  SPLIT_STYLE 
+        use:  SPLIT_STYLE
         ? ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: [
@@ -105,7 +105,7 @@ const config = {
     new ExtractTextPlugin('app.styles.css'),
     new webpack.optimize.CommonsChunkPlugin({
       name:     'vendor',
-      filename: 'app.vendor.bundle.js' 
+      filename: 'app.vendor.bundle.js'
     })
   ]
 };
@@ -115,8 +115,9 @@ const config = {
 */
 function getImplicitGlobals() {
   return new webpack.ProvidePlugin({
-    $: 'jquery',
-    jQuery: 'jquery'
+    $:      'jquery',
+    jQuery: 'jquery',
+    jquery: 'jquery'
   });
 }
 

webpack.dev.config.js

@@ -72,8 +72,9 @@ const config = {
 */
 function getImplicitGlobals() {
   return new webpack.ProvidePlugin({
-    $: 'jquery',
-    jQuery: 'jquery'
+    $:      'jquery',
+    jQuery: 'jquery',
+    jquery: 'jquery'
   });
 }