Hot loader and universal rendering, a lot of refactoring

.babelrc

@@ -1,19 +1,22 @@
 {
   "plugins": [
+    "transform-decorators-legacy",
     "transform-class-properties",
-    "syntax-decorators",
-    "transform-decorators-legacy"
+    "syntax-decorators"
   ],
   "presets": [
     ["es2015", { "modules": false }],
-    "react",
-    "stage-0"
+    "stage-0",
+    "react"
   ],
   "env": {
     "development": {
-      "presets": [
-        "react-hmre"
+      "plugins": [
+        "react-hot-loader/babel"
       ]
+    },
+    "production": {
+      "presets": ["react-optimize"]
     }
   }
 }

.eslintrc

@@ -23,27 +23,30 @@ rules:
   arrow-body-style: 0
   arrow-parens: 0
   class-methods-use-this: 0
-  func-names: 0
-  indent: 2
-  new-cap: 0
-  no-plusplus: 0
-  no-return-assign: 0
-  quote-props: 0
-  template-curly-spacing: [2, "always"]
   comma-dangle: ["error", {
     "arrays": "always-multiline",
     "objects": "always-multiline",
     "imports": "always-multiline",
     "exports": "always-multiline",
     "functions": "never"
   }]
+  func-names: 0
+  indent: 2
   jsx-quotes: [2, "prefer-single"]
-  react/forbid-prop-types: 0
-  react/jsx-curly-spacing: [2, "always"]
-  react/jsx-filename-extension: 0
-  react/jsx-boolean-value: 0
-  react/prefer-stateless-function: 0
+  new-cap: 0
+  no-plusplus: 0
+  no-return-assign: 0
+  quote-props: 0
+  template-curly-spacing: [2, "always"]
+  # import rules
   import/extensions: 0
   import/no-extraneous-dependencies: 0
   import/no-unresolved: 0
   import/prefer-default-export: 0
+  # react rules
+  react/forbid-prop-types: 0
+  react/jsx-boolean-value: 0
+  react/jsx-curly-spacing: [2, "always"]
+  react/jsx-filename-extension: 0
+  react/prefer-stateless-function: 0
+  react/require-default-props: 0

.gitignore

@@ -4,3 +4,4 @@ build
 .module-cache
 *.log*
 _nogit
+todo.md

README.md

@@ -14,14 +14,18 @@ Name comes from a fictional character [Marvin](https://en.wikipedia.org/wiki/Mar
 * [What is this?](#user-content-what-is-this)
 * [Features](#user-content-features)
 * [Setup](#user-content-setup)
+* [npm tasks](#user-content-npm-tasks)
 * [Running in dev mode](#user-content-running-in-dev-mode)
-* [Build (production)](#user-content-build-production)
-* [Running in preview production mode](#user-content-running-in-preview-production-mode)
+* [Running it with webpack dashboard](#user-content-running-it-with-webpack-dashboard)
+* [Build client (production)](#user-content-build-client-production)
+* [Running client in preview production mode](#user-content-running-client-in-preview-production-mode)
+* [Universal dev mode](#user-content-universal-dev-mode)
+* [Universal build (production)](#user-content-universal-build-production)
+* [Removing server rendering related stuff](#user-content-removing-server-rendering-related-stuff)
 * [Linting](#user-content-linting)
 * [Git hooks](#user-content-git-hooks)
 * [Changelog](#user-content-changelog)
 
-
 ## What is this?
 
 Boilerplate for kicking off React/Redux applications.
@@ -49,9 +53,10 @@ By complete we mean it has examples for:
 - [x] Redux
 - [x] Redux Thunk
 - [x] Redux DevTools (you need to have [browser extension](https://github.com/zalmoxisus/redux-devtools-extension) installed)
-- [x] Immutable reducer data
-- [x] Webpack 2 (development and production config)
+- [x] Universal rendering
+- [x] Webpack 3 (development and production config)
 - [x] Hot Module Replacement
+- [x] Immutable reducer data
 - [x] Babel - static props, decorators
 - [x] SASS with autoprefixing
 - [x] Webpack dashboard
@@ -60,30 +65,38 @@ By complete we mean it has examples for:
 - [x] Preview production build
 - [x] File imports relative to the app root
 - [x] Git hooks - lint before push
+- [x] Tree shaking build
+- [x] Import SVGs as React components
 
 ## TODO
 
-- [x] Tree shaking build
 - [ ] Switch to [redux-saga](https://github.com/redux-saga/redux-saga)
-- [ ] Universal rendering
 - [ ] Server async data
 - [ ] Internationalization
 
-Other nice to have features
-
-- [x] Generating ~~icon font from SVG~~ SVG sprite
-- [ ] Feature detection (Modernizr) (?)
-- [ ] Google analytics (?)
-- [ ] Error reporting (?)
 
 ## Setup
 
-Tested with node 6.x and 7.x
+Tested with node 7.x and 8.x
 
 ```
 $ npm install
 ```
 
+## npm tasks
+
+* `start` - starts client app only in development mode, using webpack dev server
+* `client:dev` - same as `start` plus fancy webpack dashboard
+* `client:watch` - not to be used on it's own, starts webpack with client config in watch mode
+* `client:build` - builds client application
+* `client:preview` - runs client application in *production* mode, using webpack dev server (use for local testing of the client production build)
+* `server:watch` - not to be used on it's own, starts webpack with server config in watch mode
+* `server:restart` - not to be used on it's own, server build run using `nodemon`
+* `server:build` - not to be used on it's own, builds server application
+* `server:dev` - starts server app only in development mode (use for testing server responses)
+* `universal:dev` - runs both server and client in watch mode, automatically restarts server on changes
+* `universal:build` - builds both server and client
+
 ## Running in dev mode
 
 ```
@@ -105,7 +118,7 @@ $ npm run dev
 
 **OS X Terminal.app users:** Make sure that **View → Allow Mouse Reporting** is enabled, otherwise scrolling through logs and modules won't work. If your version of Terminal.app doesn't have this feature, you may want to check out an alternative such as [iTerm2](https://www.iterm2.com/).
 
-## Build (production)
+## Build client (production)
 
 Build will be placed in the `build` folder.
 
@@ -133,7 +146,7 @@ const publicPath = '/your-app/';
 
 Don't forget the trailing slash (`/`). In development visit `http://localhost:3000/your-app/`.
 
-## Running in preview production mode
+## Running client in preview production mode
 
 This command will start webpack dev server, but with `NODE_ENV` set to `production`.
 Everything will be minified and served.
@@ -143,60 +156,86 @@ Hot reload will not work, so you need to refresh the page manually after changin
 npm run preview
 ```
 
-## Linting
-
-For linting I'm using [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb),
-but some options are overridden to my personal preferences.
+## Universal dev mode
 
 ```
-$ npm run lint
+npm run universal:dev
 ```
 
-## Git hooks
+Visit `http://localhost:8080/` from your browser of choice.
+Server is visible from the local network as well.
 
-Linting pre-push hook is not enabled by default.
-It will prevent the push if lint task fails,
-but you need to add it manually by running:
+## Universal build (production)
 
 ```
-npm run hook-add
+npm run universal:build
 ```
 
-To remove it, run this task:
+copy `package.json` and `build` folder to your production server
+
+install only production dependencies and run server
 
 ```
-npm run hook-remove
+npm install --production
+
+node ./build/server.js
 ```
 
-## Components
+## Removing server rendering related stuff
 
-### SVG icons - `Icon`
+If you are not using server rendering remove following packages from `package.json`
 
-Add SVG icons to `source/assets/icons` folder, and they will automatically be added to SVG sprite.
+* `express`
+* `transit-immutable-js`
+* `transit-js`
+* `nodemon`
+* `concurrently`
 
-**Usage:**
+Also open `source/js/config/store.js` and remove lines marked with the following comment
 
 ```
-import Icon from 'components/Global/Icon';
+// Remove if you are not using server rendering
+```
+
+Client app is going to work without this but, it will include few unused packages.
+Therefore it is better to remove them.
+
+
+## Linting
+
+For linting I'm using [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb),
+but some options are overridden to my personal preferences.
 
-<Icon glyph='triangle' />
+```
+$ npm run lint
 ```
 
-**Available props**
+## Git hooks
+
+Linting pre-push hook is not enabled by default.
+It will prevent the push if lint task fails,
+but you need to add it manually by running:
 
 ```
-glyph       // required, name of the SVG icon
-className   // optional, additional CSS class, default ones are `Icon Icon--iconName`
-width       // optional, default 24
-height      // optional, default 24
-style       // optional, CSS style object
+npm run hook-add
 ```
 
+To remove it, run this task:
+
+```
+npm run hook-remove
+```
 
 -----
 
 ## Changelog
 
+#### 0.2.0
+
+* Webpack updated to v3 and rewritten webpack config
+* Optional universal rendering
+* A lot of code changes
+
 #### 0.1.7
 
 * Migrated to React Router 4.x (thanks @shams-ali)