allow hot module reloading

package-lock.json

@@ -963,6 +963,12 @@
       "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
       "dev": true
     },
+    "@types/node": {
+      "version": "12.12.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.7.tgz",
+      "integrity": "sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -994,6 +1000,12 @@
         "@types/react": "*"
       }
     },
+    "@types/webpack-env": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.14.1.tgz",
+      "integrity": "sha512-0Ki9jAAhKDSuLDXOIMADg54Hu60SuBTEsWaJGGy5cV+SSUQ63J2a+RrYYGrErzz39fXzTibhKrAQJAb8M7PNcA==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.7.0.tgz",

package.json

@@ -7,7 +7,7 @@
     "clean": "rm -rf ./dist",
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "prebuild": "npm run clean",
-    "build": "parcel build -d dist --public-url / ./src/index.html",
+    "build": "parcel build -d dist --public-url ./ ./src/index.html",
     "predev": "npm run clean",
     "dev": "parcel serve -d dist --public-url / ./src/index.html",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -29,8 +29,10 @@
     "typescript": "^3.7.2"
   },
   "devDependencies": {
+    "@types/node": "^12.12.7",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.4",
+    "@types/webpack-env": "^1.14.1",
     "@typescript-eslint/eslint-plugin": "^2.7.0",
     "@typescript-eslint/parser": "^2.7.0",
     "eslint": "^6.6.0",

src/components/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 function App () {
   return (
-    <div>foobar</div>
+    <div>baz</div>
   );
 }
 

src/index.tsx

@@ -2,4 +2,8 @@ import React from 'react';
 import { render } from 'react-dom';
 import { App } from './components/App';
 
+if (process.env.NODE_ENV === 'development' && module.hot) {
+  module.hot.accept();
+}
+
 render(<App />, document.getElementById('appContainer'));