Feat: add steps to ensure an optimized production build

- Webpack configuration for production
- Routes and store configured for production

Author: RyanCCollins

app/src/routes.js

@@ -9,7 +9,10 @@ import * as Pages from 'pages';
 
 const routes = (
   <Provider store={store}>
-    <Router history={history}>
+    <Router
+      history={history} // Scroll to top on route transitions
+      onUpdate={() => window.scrollTo(0, 0)} // eslint-disable-line
+    >
       <Route path="/" component={App}>
         <IndexRoute component={Pages.LandingPage} />
         <Route path="*" component={Pages.NotFoundPage} />

app/src/store.js

@@ -5,6 +5,8 @@ import { browserHistory } from 'react-router';
 import createLogger from 'redux-logger';
 import promiseMiddleware from 'redux-promise-middleware';
 import rootReducer from './reducers';
+const isClient = typeof document !== 'undefined';
+const isDeveloping = process.env.NODE_ENV !== 'production';
 
 const initialState = {
   featureComponent: {
@@ -17,15 +19,21 @@ const initialState = {
 /* Commonly used middlewares and enhancers */
 /* See: http://redux.js.org/docs/advanced/Middleware.html*/
 const loggerMiddleware = createLogger();
-const middlewares = [thunk, promiseMiddleware(), loggerMiddleware];
+const middlewares = [thunk, promiseMiddleware()];
+
+if (isDeveloping) {
+  middlewares.push(loggerMiddleware);
+}
 
 /* Everyone should use redux dev tools */
 /* https://github.com/gaearon/redux-devtools */
 /* https://medium.com/@meagle/understanding-87566abcfb7a */
 const enhancers = [];
 const devToolsExtension = window.devToolsExtension;
-if (typeof devToolsExtension === 'function') {
-  enhancers.push(devToolsExtension());
+if (isClient && isDeveloping) {
+  if (typeof devToolsExtension === 'function') {
+    enhancers.push(devToolsExtension());
+  }
 }
 
 const composedEnhancers = compose(

webpack.config.babel.js

@@ -75,8 +75,11 @@ module.exports = {
       pages: path.resolve(ROOT_PATH, 'app/src/pages')
     },
   },
-  output: {
-    path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'server/public') : path.resolve(ROOT_PATH, 'app/build'),
+  output: { // Set output to public folder in production
+    path: process.env.NODE_ENV === 'production' ?
+      path.resolve(ROOT_PATH, 'server/public')
+    :
+      path.resolve(ROOT_PATH, 'app/build'),
     publicPath: '/',
     filename: 'bundle.js',
   },
@@ -91,7 +94,21 @@ module.exports = {
     host: HOST,
     port: PORT
   },
-  plugins: [
+  plugins: process.env.NODE_ENV === 'production' ?
+  [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+    }),
+    new webpack.optimize.OccurrenceOrderPlugin(true),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+      },
+    }),
+  ]
+:
+  [
     new webpack.HotModuleReplacementPlugin(),
     new NpmInstallPlugin(),
     new HtmlwebpackPlugin({