updated README.MD

Author: tahnik

README.MD

@@ -1,9 +1,10 @@
-# Behold the React + Express + Webpack + Babel Boilerplate
-## Server-side rendering and Redux is now included!
+# Behold the ReactJS + ExpressJS Boilerplate
+## With Server-side rendering, Redux and React-router v4
 
-This is a boilerplate to use ReactJS ExpressJS and Redux in a project.
+This is a boilerplate to use ReactJS, ExpressJS, Redux and React Router v4 in a project.
 
 - [ReactJS] - The state based framework for your Views
+- [React Router v4] - For routing to different paths
 - [Redux] - Redux manages your state
 - [Babel] - The compiler to compile your JS files with es6, es7, JSX syntax to regular javascript
 - [Webpack] - The module binder which takes all your JS files from different directories and compiles them into a single app.bundle.js (you can change the filename of course) so you can include it in a HTML page
@@ -12,70 +13,46 @@ This is a boilerplate to use ReactJS ExpressJS and Redux in a project.
 
 # Installation
 
-Node Version: v7.2.1
+Node Version: v8.3.0
 
 Just clone this repo or download the zip file. `cd` into the directory and run
 
     npm install
 
-To use webpack you also need to run
+## Developing App with [Hot Reload]
+To develop your own react application, you can take advantage of React Hot Loader and Webpack Dev Server. To develop app with hot reload:
 
-    npm install webpack -g
+    npm run dev
 
-You might need to run this command as `sudo`.
+Now you can access your react application on http://localhost:8080
 
-Once you have the webpack installed, cd into the directory where you cloned this repo and run
+## Production build and Deploy
+To make a production build of your project, run the following commands
 
-    webpack
+    npm run build
+  
+This will create create two files: `index.js` in `server/public/js` and `server.js` in `server/bin`.
 
-Note: if you would rather not install webpack globally, you can also run webpack locally:
-
-    node_modules/.bin/webpack
-
-This will create update two files: `server.bundle.js` and `bin/app.bundle.js`.
-
-`server.bundle.js` will be used for serving the application on port 3000 and `app.bundle.js` is the actual react app itself.
+`server.js` will be used for serving the application on port 3000 and `index.js` is the actual react app itself.
 
 Finally run
 
     npm start
 
 The you will be able to access this app from http://localhost:3000.
 
-# Flow of the app/what is going on
-So here is the flow.
-
-First you create all your ReactJS files using whatever syntax you like. These files will stay in the `views` directory. If you are using Redux then you'll be using all the directories but if you don't know Redux you can just remove the `actions`, `containers` and `reducers` directories. You can use plain JSX or ES6 or Experimental ES7 in your JS files.
-
-Once you've done that you fire up a terminal in that directory and run webpack. This has two steps:
-
-- Webpack calls babel to compile all the files in the views directory to standard javascript, because current browsers doesn't understand ES6/ES7/JSX syntax.
-- Once the compiling is done webpack takes all the compiled files and binds then into `app.bundle.js` and `server.bundle.js` along with all the dependencies.
-
-So now you have a file in your `bin` directory which is `app.bundle.js`. This is basically your whole React app in one file. And you also have a file `server.bundle.js` which your ExpressJS server.
-
-### Serve your app with server side rendering (and why it is important)
-
-To serve your app with server side rendering, all you need to do is run `npm start`. The way it works is that the ExpressJS server (`server.js`) renders the app on the server and serves it to the public.
-
-I know it's confusing. Hold on!
-
-When the React app is served without server side rendering, a browser will download the `index.html` and load the `app.bundle.js` in real time. When the `app.bundle.js` has finished loading up it will render the page the way you have programmed. This initial render takes longer than usual and can be a nightmare for SEO or search engines. Also, a big reason of using React is how fast it is right?!
-
-With server side rendering, the ExpressJS server will use the React engine to take your `app.bundle.js` and render the necessary parts of your webpage to plain HTML string. So the client/public will receive the same `index.html` with `app.bundle.js` included with it, but this time the rendering is already completed by the server. Your `app.bundle.js` won't modify or change anything in the page unless you have clicked something on the page.
+To get a distributable tarball of your application, run this command
 
-To understand how this server side rendering is done, you need do some research on the following resources:
+    npm pack
 
-- [ReactDOMServer]
-- [Redux Server Side]
-- [React Router Server Side]
+Remember that you have to run `npm run build` before doing this. This will create a tar.gz file in your root folder. The contents in this file is deployable. All you need to do is copy the contents inside package folder inside this tar.gz file to your server and run the app with something like [pm2].
 
 
 [ReactJS]: <https://facebook.github.io/react/>
 [Babel]: <https://babeljs.io/>
 [Webpack]: <https://webpack.github.io/>
+[React Router v4]: <https://reacttraining.com/react-router/>
+[Hot Reload]: <https://stackoverflow.com/questions/41428954>
 [ExpressJS]: <http://expressjs.com/>
 [Redux]: <http://redux.js.org/>
-[ReactDOMServer]: <https://facebook.github.io/react/docs/react-dom-server.html>
-[Redux Server Side]: <http://redux.js.org/docs/recipes/ServerRendering.html>
-[React Router Server Side]: <https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md>
+[pm2]: <https://github.com/Unitech/pm2>