From c3ab2801feb42e79d375f6f16673bcb23ec7c064 Mon Sep 17 00:00:00 2001
From: Calum Flanagan <calum.flanagan@go.edgehill.ac.uk>
Date: Wed, 22 Feb 2017 13:30:20 +0000
Subject: [PATCH] Completed part 4

---
 components/App.js |  2 +-
 package.json      |  7 +++++--
 server/server.js  | 13 +++++++++++++
 webpack.config.js | 16 +++++++++++++---
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/components/App.js b/components/App.js
index e205f43..a41ff05 100644
--- a/components/App.js
+++ b/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>
   }
 
 }
diff --git a/package.json b/package.json
index 034be19..440283d 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/server/server.js b/server/server.js
index 51a4946..54c5b11 100644
--- a/server/server.js
+++ b/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) {
diff --git a/webpack.config.js b/webpack.config.js
index 5b16fdd..08823b2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,11 +1,21 @@
+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: [
       {
@@ -13,7 +23,7 @@ module.exports = {
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: {
-          presets: ['react', 'es2015']
+          presets: ['react', 'es2015', 'react-hmre']
         }
       }
     ]