Completed part 4

components/App.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 class App extends Component {
 
   render() {
-    return <div>This is definitely a React app now!</div>
+    return <div>This is definitely a hot (module reloading) React app now!</div>
   }
 
 }

package.json

@@ -4,7 +4,7 @@
   "description": "A simple todo list app built with React, Redux and Webpack",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "nodemon server/server.js"
+    "serve": "nodemon server/server.js --ignore components"
   },
   "repository": {
     "type": "git",
@@ -17,9 +17,12 @@
     "babel-loader": "^6.2.2",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
+    "babel-preset-react-hmre": "^1.1.1",
     "express": "^4.13.4",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "webpack": "^1.12.13"
+    "webpack": "^1.12.13",
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.17.0"
   }
 }

server/server.js

@@ -1,8 +1,21 @@
 var express = require('express');
 var path = require('path');
+var config = require('../webpack.config.js');
+var webpack = require('webpack');
+var webpackDevMiddleware = require('webpack-dev-middleware');
+var webpackHotMiddleware = require('webpack-hot-middleware');
 
 var app = express();
 
+var compiler = webpack(config);
+
+app.use(webpackDevMiddleware(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}));
+
+app.use(webpackHotMiddleware(compiler));
+
 app.use(express.static('./dist'));
 
 app.use('/', function (req, res) {

webpack.config.js

@@ -1,19 +1,29 @@
+var webpack = require('webpack');
+
 module.exports = {
   devtool: 'inline-source-map',
-  entry: ['./client/client.js'],
+  entry: [
+    'webpack-hot-middleware/client',
+    './client/client.js'
+  ],
   output: {
-    path: './dist',
+    path: require("path").resolve("./dist"),
     filename: 'bundle.js',
     publicPath: '/'
   },
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
   module: {
     loaders: [
       {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: {
-          presets: ['react', 'es2015']
+          presets: ['react', 'es2015', 'react-hmre']
         }
       }
     ]