Fixes the projects dependencies structure so that the "dependecies" s…

…ection contains ALL libraries that are required for the server runtime. The "devDependencies" section contains the libraries required for building the project. Fixes mui#27

README.md

@@ -1,7 +1,7 @@
 <p align='center'>
   <h1 align='center'>React, Universally</h1>
   <p align='center'><img width='150' src='https://raw.githubusercontent.com/ctrlplusb/assets/master/logos/react-universally.png' /></p>
-  <p align='center'>An ultra low dependency node v6 universal react boilerplate with an amazing dev experience.</p>
+  <p align='center'>An ultra minimal node v6 universal react boilerplate with a great dev experience.</p>
 </p>
 
 ## TOC
@@ -11,14 +11,14 @@
  - [Overview](https://github.com/ctrlplusb/react-universally#overview)
  - [Extensions and Alternatives](https://github.com/ctrlplusb/react-universally#extensions-and-alternatives)
  - [Project Structure](https://github.com/ctrlplusb/react-universally#project-structure)
- - [Server Runtime Dependencies](https://github.com/ctrlplusb/react-universally#server-runtime-dependencies)
+ - [Project Dependecies](https://github.com/ctrlplusb/react-universally#project-dependencies)
  - [Deploy your very own Server Side Rendering React App in 5 easy steps](https://github.com/ctrlplusb/react-universally#deploy-your-very-own-server-side-rendering-react-app-in-5-easy-steps)
  - [npm script commands](https://github.com/ctrlplusb/react-universally#npm-script-commands)
  - [References](https://github.com/ctrlplusb/react-universally#references)
 
 ## About
 
-This boilerplate contains an absolutely minimal set of dependencies in order to get you up and running with a universal react project as quickly as possible. It provides you with a great development experience that includes hot reloading of everything. 
+This boilerplate contains a super minimal project configuration and structure, providing you with everything you need to kick off your next universal react project. It focuses on the build and developer tools. The actual react project architecture is all up to you. 
 
 ## Features
 
@@ -91,20 +91,11 @@ This is still in production, so it's not really worth looking at right now, but
 |- webpackConfigFactory.js  // Webpack configuration builder 
 ```
 
-## Server Runtime Dependencies
+## Project Dependencies 
 
-Even though we are using webpack to support our universal application we keep the webpack runtime out of our production runtime environment.  Everything is prebundled in prep for production execution.  Therefore we only have the following runtime dependencies:
+The dependencies within `package.json` are structured so that the libraries required to transpile/bundle the source are contained within the `devDependencies` section, whilst the libraries required during the server runtime are contained within the `dependencies` section.
 
-  - `node` v6
-  - `compression` - Gzip compression support for express server responses.
-  - `express` - Web server.
-  - `helmet` - Provides a content security policy for express.
-  - `hpp` - Express middleware to protect against HTTP Parameter Pollution attacks.
-  - `react` - A declarative, efficient, and flexible JavaScript library for building user interfaces.
-  - `react-dom` - React support for the DOM.
-  - `react-router` - A complete routing library for React.
-  - `serialize-javascript` - A superset of JSON that includes regular expressions and functions.
-  - `source-map-support` - Adds source map support to node.js (for stack traces).
+You may notice that a few `webpack` libraries are contained within the `dependencies` section.  These are not needed to do any runtime `webpack` compile runs, instead they are included so that the runtime can require the `webpack` configuration and then use it to configure the static hosting paths for our webpack bundles.  This saves us having to do any duplicate configuration of the respective paths.
 
 ## Deploy your very own Server Side Rendering React App in 5 easy steps ##
 
@@ -162,6 +153,14 @@ Executes `esling` (using the Airbnb config) against the src folder. Alternativel
 
 ## Troubleshooting ##
 
+___Q:___ __My project fails to build and execute when I deploy it to my host__
+
+The likely issue in this case, is that your hosting provider doesn't install the `devDependencies` by default.  The dependencies within `package.json` are structured so that the libraries required to transpile/bundle the source are contained within the `devDependencies` section, whilst the libraries required during the server runtime are contained within the `dependencies` section.
+You two options to fix this:
+
+ 1. Prebuild your project and then deploy it along with the build output.
+ 2. Change your host configuration so that it will install the `devDependencies` too.  In the case of Heroku for example see [here](https://devcenter.heroku.com/articles/nodejs-support#devdependencies).
+
 ___Q:___ __My server bundle fails to execute after installing a new library.__
 
 This may occur if the library you added contains a file format that depends on one of your webpack loaders to process it (e.g. `react-toolbox` contains sass/css).  For these cases you need to ensure that you add the file types to the whitelist of the `externals` section in the `webpackConfigFactory`.  For example:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-universally",
   "version": "1.2.2",
-  "description": "An ultra low dependency node v6 universal react boilerplate with an amazing dev experience.",
+  "description": "An ultra minimal node v6 universal react boilerplate with a great dev experience.",
   "main": "build/server/main.js",
   "engines": {
     "node": "~6.3.1"
@@ -32,20 +32,25 @@
   },
   "homepage": "https://github.com/ctrlplusb/react-universally#readme",
   "dependencies": {
+    "assets-webpack-plugin": "3.4.0",
     "compression": "1.6.2",
+    "dotenv": "2.0.0",
     "express": "4.14.0",
+    "extract-text-webpack-plugin": "2.0.0-beta.3",
     "helmet": "2.1.2",
     "hpp": "0.2.1",
     "normalize.css": "4.2.0",
+    "path": "0.12.7",
     "react": "15.3.0",
     "react-dom": "15.3.0",
     "react-hot-loader": "3.0.0-beta.2",
     "react-router": "2.6.1",
     "serialize-javascript": "1.3.0",
-    "source-map-support": "0.4.2"
+    "source-map-support": "0.4.2",
+    "webpack": "2.1.0-beta.20",
+    "webpack-node-externals": "1.3.3"
   },
   "devDependencies": {
-    "assets-webpack-plugin": "3.4.0",
     "babel-cli": "6.11.4",
     "babel-core": "6.13.2",
     "babel-eslint": "6.1.2",
@@ -54,24 +59,18 @@
     "babel-preset-react": "6.11.1",
     "chokidar": "1.6.0",
     "css-loader": "0.23.1",
-    "dotenv": "2.0.0",
     "eslint": "3.2.2",
     "eslint-config-airbnb": "10.0.0",
     "eslint-plugin-import": "1.12.0",
     "eslint-plugin-jsx-a11y": "2.0.1",
     "eslint-plugin-react": "6.0.0",
-    "extract-text-webpack-plugin": "2.0.0-beta.3",
     "fake-style-loader": "1.0.1",
     "file-loader": "0.9.0",
     "json-loader": "0.5.4",
     "node-notifier": "4.6.0",
-    "path": "0.12.7",
-    "rimraf": "2.5.4",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
-    "webpack": "2.1.0-beta.20",
     "webpack-dev-middleware": "1.6.1",
-    "webpack-hot-middleware": "2.12.2",
-    "webpack-node-externals": "1.3.3"
+    "webpack-hot-middleware": "2.12.2"
   }
 }

src/server/index.js

@@ -43,7 +43,8 @@ app.use(compression());
 const webpackClientConfig = clientConfigBuilder({ mode: process.env.NODE_ENV });
 app.use(
   webpackClientConfig.output.publicPath,
-  express.static(webpackClientConfig.output.path));
+  express.static(webpackClientConfig.output.path)
+);
 
 // Bind our universal react app middleware as the handler for all get requests.
 app.get('*', universalReactAppMiddleware);

src/shared/components/Home/Home.js

@@ -4,10 +4,10 @@ function Home() {
   return (
     <article>
       <p>
-        This boilerplate contains a super minimal set of dependencies in order
-        to get you up and running with a universal react project, whilst also
-        providing you with a great development experience that includes hot
-        reloading of the client and server code.
+        This boilerplate contains a super minimal project configuration and
+        structure, providing you with everything you need to kick off your next
+        universal react project. It focuses on the build and developer tools.
+        The actual react project architecture is all up to you. 
       </p>
 
       <p>

webpackConfigFactory.js

@@ -5,9 +5,9 @@ const webpack = require('webpack');
 const AssetsPlugin = require('assets-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const dotenv = require('dotenv');
 
 // @see https://github.com/motdotla/dotenv
-const dotenv = require('dotenv');
 dotenv.config(process.env.NOW
   // This is to support deployment to the "now" host.  See the README for more info.
   ? { path: './.envnow', silent: true }