Got Hot-Module-Reloading working

5 files changed, 35 insertions, 5 deletions

diff --git a/package-lock.json b/package-lock.json
index 07fe093fd..535c348d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -297,6 +297,16 @@
         "@types/webpack": "*"
       }
     },
+    "@types/webpack-hot-middleware": {
+      "version": "2.16.4",
+      "resolved": "https://registry.npmjs.org/@types/webpack-hot-middleware/-/webpack-hot-middleware-2.16.4.tgz",
+      "integrity": "sha512-z9np8JOIx7P66GMPJn+FkFcClo1RZZvmwVp9GAfupcEF1i+6+QmVaozTPZwpHexukgVy0F7RRQkybAeV2y+RjA==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/webpack": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.11",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz",
@@ -11139,6 +11149,18 @@
         }
       }
     },
+    "webpack-hot-middleware": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.24.3.tgz",
+      "integrity": "sha512-pPlmcdoR2Fn6UhYjAhp1g/IJy1Yc9hD+T6O9mjRcWV2pFbBjIFoJXhP0CoD0xPOhWJuWXuZXGBga9ybbOdzXpg==",
+      "dev": true,
+      "requires": {
+        "ansi-html": "0.0.7",
+        "html-entities": "^1.2.0",
+        "querystring": "^0.2.0",
+        "strip-ansi": "^3.0.0"
+      }
+    },
     "webpack-log": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-1.2.0.tgz",
diff --git a/package.json b/package.json
index 65c718283..6697b5f47 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@types/mocha": "^5.2.5",
     "@types/react-dom": "^16.0.9",
     "@types/webpack-dev-middleware": "^2.0.2",
+    "@types/webpack-hot-middleware": "^2.16.4",
     "awesome-typescript-loader": "^5.2.1",
     "chai": "^4.2.0",
     "copy-webpack-plugin": "^4.6.0",
@@ -26,7 +27,8 @@
     "webpack": "^4.29.1",
     "webpack-cli": "^3.2.1",
     "webpack-dev-middleware": "^3.5.2",
-    "webpack-dev-server": "^3.1.14"
+    "webpack-dev-server": "^3.1.14",
+    "webpack-hot-middleware": "^2.24.3"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
@@ -74,4 +76,4 @@
     "url-loader": "^1.1.2",
     "uuid": "^3.3.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index fc6f0a208..9a359e868 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -44,7 +44,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 450, y: 500, title: "cat 1"
+        x: 450, y: 100, title: "cat 1"
     });
     doc3.Set(KeyStore.Data, new ImageField);
     const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
diff --git a/src/server/index.ts b/src/server/index.ts
index f3db7c73b..640ad8180 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -2,6 +2,7 @@ import * as express from 'express'
 const app = express()
 import * as webpack from 'webpack'
 import * as wdm from 'webpack-dev-middleware';
+import * as whm from 'webpack-hot-middleware';
 import * as path from 'path'
 const config = require('../../webpack.config')
 const compiler = webpack(config)
@@ -20,6 +21,8 @@ app.use(wdm(compiler, {
     publicPath: config.output.publicPath
 }))
 
+app.use(whm(compiler))
+
 // start the Express server
 app.listen(port, () => {
     console.log(`server started at http://localhost:${port}`);
diff --git a/webpack.config.js b/webpack.config.js
index 73538c2df..478c900b2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,7 +4,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
   mode: 'development',
-  entry: "./src/client/views/Main.tsx",
+  entry: ["./src/client/views/Main.tsx", 'webpack-hot-middleware/client?reload=true'],
   devtool: "source-map",
   node: {
     fs: 'empty',
@@ -50,7 +50,10 @@ module.exports = {
     }]
   },
   plugins: [
-    new CopyWebpackPlugin([{ from: "deploy", to: path.join(__dirname, "build") }])
+    new CopyWebpackPlugin([{ from: "deploy", to: path.join(__dirname, "build") }]),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
   ],
   devServer: {
     compress: false,