18 react hot loader implementation

18 ReactHotLoader/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}

18 ReactHotLoader/devServer.js

@@ -0,0 +1,16 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+	noInfo: true,
+  historyApiFallback: true
+}).listen(8080, 'localhost', function (err, result) {
+  if (err) {
+    return console.log(err);
+  }
+
+  console.log('Listening at http://localhost:8080/');
+});

18 ReactHotLoader/package.json

@@ -3,8 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
+    "clean": "rimraf dist",
     "postinstall": "tsd reinstall --overwrite --save",
-    "start": "webpack-dev-server",
+    "start": "node devserver.js",
     "test": "karma start"
   },
   "author": "Braulio Diez",
@@ -15,19 +16,26 @@
     "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",
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0",
-    "toastr": "^2.1.2"
+    "toastr": "^2.1.2",
+    "webpack-dev-server": "^1.14.1"
   },
   "devDependencies": {
+    "babel-core": "^6.13.2",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.13.2",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
     "chai": "^3.5.0",
     "css-loader": "^0.23.1",
     "deep-freeze": "0.0.1",
     "enzyme": "^2.4.1",
+    "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.9.0",
@@ -41,14 +49,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-hot-middleware": "^2.12.2"
   }
 }

18 ReactHotLoader/readme.md

@@ -0,0 +1,120 @@
+# 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):
+
+ - babel-core
+ - babel-loader
+ - babel-preset-es2015
+ - babel-preset-react
+ - babel-preset-stage-0
+ - react-hot-loader
+ - webpack-hot-middleware
+
+```
+npm install babel-core babel-loader
+babel-preset-es2015 babel-preset-react
+babel-preset-stage-0
+react-hot-loader
+webpack-hot-middleware --save-dev
+```
+
+.babelrc file content to be added:
+
+```json
+{
+  "presets": ["es2015", "stage-0", "react"]
+}
+```
+
+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'
+  ],
+
+  // (...)
+
+  module: {
+		loaders: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        loaders: ['react-hot', 'babel','ts-loader']
+      },
+      // (..)
+	},
+
+  plugins:[
+    new webpack.HotModuleReplacementPlugin(),
+    // (...)
+  ]
+}
+```
+
+We ned to add a new devServer.js file (we could try to setup a call to webpack-dev-server directly).
+
+```javascript
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+	noInfo: true,
+  historyApiFallback: true
+}).listen(8080, 'localhost', function (err, result) {
+  if (err) {
+    return console.log(err);
+  }
+
+  console.log('Listening at http://localhost:8080/');
+});
+````
+
+Then update the "start" script on the package.json file:
+
+```json
+"scripts": {
+  // (...)
+  "start": "node devserver.js",
+  //(...)
+},
+```
+
+# 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/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

@@ -6,6 +6,7 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var basePath = __dirname;
 
 module.exports = {
+  debug: true,
   context: path.join(basePath, "src"),
   resolve: {
       // .js is required for react imports.
@@ -14,35 +15,32 @@ 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',
     '../node_modules/bootstrap/dist/css/bootstrap.css'
   ],
 
   output: {
+    publicPath: 'http://localhost:8080/',
     path: path.join(basePath, "dist"),
     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
-  },
 
   // 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', 'babel','ts-loader']
       },
       //Note: Doesn't exclude node_modules to load bootstrap
       {
@@ -64,6 +62,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/