Merge pull request #69 from Lemoncode/18_React_Hot_Loader_Implementation

18 react hot loader implementation

Author: brauliodiez

18 ReactHotLoader/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
+    "clean": "rimraf dist",
     "postinstall": "tsd reinstall --overwrite --save",
     "start": "webpack-dev-server",
     "test": "karma start"
@@ -15,7 +16,7 @@
     "lodash": "^4.5.1",
     "object-assign": "^4.0.1",
     "q": "^1.4.1",
-    "react": "^15.2.1",
+    "react": "^15.3.0",
     "react-dom": "^15.2.1",
     "react-redux": "^4.4.5",
     "react-router": "^2.5.2",
@@ -41,14 +42,16 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.4.5",
     "react-addons-test-utils": "^15.2.1",
+    "react-hot-loader": "^1.3.0",
     "redux-mock-store": "^1.1.2",
+    "rimraf": "^2.5.4",
     "sinon": "^1.17.3",
     "style-loader": "^0.13.0",
     "ts-loader": "^0.8.1",
     "tsd": "^0.6.5",
     "typescript": "^1.8.9",
     "url-loader": "^0.5.7",
     "webpack": "^1.12.13",
-    "webpack-dev-server": "~1.10.1"
+    "webpack-dev-server": "^1.14.1"   
   }
 }

18 ReactHotLoader/readme.md

@@ -0,0 +1,84 @@
+# React Hot Loader + Redux dev tool support
+
+React Hot loader allows us to introduce changes in the application
+source code meanwhile we are running our web server and get the changes into our page without having to reload the browser and not loosing the application
+state.
+
+Redux dev tool is a chrome add-on that allows us to browse the state, replay actions, inject actions, export / import state...
+
+# Steps to configure hot Loader
+
+You don't need to update the source code of the app, all we have to do is install a list of npm packages, add some babel configuration, and then set a web server + updates on the webpack.config.
+
+Packages to install (dev dependencies):
+
+ - react-hot-loader 
+
+```
+npm install react-hot-loader --save-dev
+```
+
+webpack config updates:
+
+```javascript
+//(...)
+module.exports = {
+
+  // TODO: remove hot loading entry points in production
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    './index.tsx',
+    './css/site.css',
+    '../node_modules/toastr/build/toastr.css',
+    '../node_modules/bootstrap/dist/css/bootstrap.css'
+  ],
+
+  devServer: {
+      contentBase: './dist', //Content base
+      inline: true, //Enable watch and live reload
+      host: 'localhost',
+      port: 8080,
+      noInfo: true,
+      hot: true,
+      historyApiFallback: true
+  },
+
+
+  // (...)
+
+  module: {
+		loaders: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        loaders: ['react-hot', 'ts']
+      },
+      // (..)
+	},
+
+  plugins:[
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    // (...)
+  ]
+}
+```
+
+
+# Steps to configure Redux dev tool
+
+First we have to download the app from the chrome store.
+
+Then we have to add a line of code to the create store to check
+wether is enabled the dev tool (app.tsx).
+
+````javascript
+let store = createStore(
+  reducers,
+   compose(
+     applyMiddleware(ReduxThunk)
+     ,nonTypedWindow.devToolsExtension ? nonTypedWindow.devToolsExtension() : f => f
+   )
+);
+````

18 ReactHotLoader/src/components/about/aboutPage.tsx

@@ -10,6 +10,9 @@ export default class About extends React.Component<Props, {}> {
        return (
           <div className="row">
             <h2>About Page</h2>
+            <p>React Hot loader allows us to introduce changes in the application source code meanwhile we are running our web server and get the changes into our page without having to reload the browser and not loosing the application state.</p>
+            <p>Redux dev tool is a chrome add-on that allows us to browse the state, replay actions, inject actions, export / import state...</p>
+            <p>More info about how this sample works in readme.md</p>
             <Link to="/members">Members</Link>
           </div>
        );

18 ReactHotLoader/src/components/app.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import { Provider } from 'react-redux';
 import Header from './common/header';
 import reducers  from '../reducers';
@@ -9,9 +9,14 @@ import SpinnerContainer from './common/spinner.container';
 interface Props extends React.Props<App> {
 }
 
+const nonTypedWindow : any = window;
+
 let store = createStore(
-  reducers
-  ,applyMiddleware(ReduxThunk)
+  reducers,
+   compose(
+     applyMiddleware(ReduxThunk)
+     ,nonTypedWindow.devToolsExtension ? nonTypedWindow.devToolsExtension() : f => f
+   )
 );
 
 export default class App extends React.Component<Props, {}> {

18 ReactHotLoader/webpack.config.js

@@ -14,7 +14,10 @@ module.exports = {
       extensions: ['', '.js', '.ts', '.tsx']
   },
 
+  // Toake into account: remove hot loading entry points in production
   entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
     './index.tsx',
     './css/site.css',
     '../node_modules/toastr/build/toastr.css',
@@ -26,23 +29,25 @@ module.exports = {
     filename: 'bundle.js'
   },
 
-  //https://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli
   devServer: {
-    contentBase: './dist', //Content base
-    inline: true, //Enable watch and live reload
-    host: 'localhost',
-    port: 8080
-  },
+      contentBase: './dist', //Content base
+      inline: true, //Enable watch and live reload
+      host: 'localhost',
+      port: 8080,
+      noInfo: true,
+      hot: true,
+      historyApiFallback: true
+    },
 
   // http://webpack.github.io/docs/configuration.html#devtool
-  devtool: 'inline-source-map',
+  devtool: 'source-map',
 
   module: {
 		loaders: [
       {
         test: /\.(ts|tsx)$/,
         exclude: /node_modules/,
-        loader: 'ts-loader'
+        loaders: ['react-hot', 'ts']
       },
       //Note: Doesn't exclude node_modules to load bootstrap
       {
@@ -64,6 +69,8 @@ module.exports = {
 	},
 
   plugins:[
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
     //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html', //Name of file in ./dist/

readme.md

@@ -16,7 +16,7 @@ start working with React and Typescript. Characteristics:
 
  + Using Immutablejs.
  + Using React Hot Loader.
- 
+
 ##Call for contributors:
 
 Some months ago this project started as something internal... let's create some simple samples that cover react / redux / typescript scenarios that could serve as a guidance and reference in the future... now, we and other developers are using this repo as quick by sample guidance. We keep on adding more samples to it, but we have found that older samples need some updates / refactoring.
@@ -166,3 +166,12 @@ Redux Saga it's an interesting alternative for redux-thunk, worth to take a look
 Use webpack require.ensure to load routes on demand.
 
 * [Lazy Loading Webpack / React Router](http://blog.mxstbr.com/2016/01/react-apps-with-pages/)
+
+## 18 Add support for ReactHotloader and ReduxDev Tools.
+
+React Hot loader allows us to introduce changes in the application source code meanwhile we are running our web server and get the changes into our page without having to reload the browser and not losing the application state.
+
+Redux dev tool is a chrome add-on that allows us to browse the state, replay actions, inject actions, export / import state...
+
+* [React Hot Loader](https://github.com/gaearon/react-hot-loader)
+* [Redux Dev Tool](https://github.com/gaearon/redux-devtools)