Configure hot reloading for React app during development

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fetch client country code based on IP [#541](https://github.com/open-apparel-registry/open-apparel-registry/pull/541)
 - Free text search filter for facility list items [#542](https://github.com/open-apparel-registry/open-apparel-registry/pull/542)
 - Add admin-authorized dashboard route: [#553](https://github.com/open-apparel-registry/open-apparel-registry/pull/553)
+- Enabled hot reloading during development in React app [#556](https://github.com/open-apparel-registry/open-apparel-registry/pull/556)
 
 ### Changed
 - Show active facility list names and descriptions on profile page [#534](https://github.com/open-apparel-registry/open-apparel-registry/pull/534)

src/app/config-overrides.js

@@ -0,0 +1,11 @@
+const rewireReactHotLoader = require('react-app-rewire-hot-loader');
+
+/* config-overrides.js */
+module.exports = function override (config, env) {
+    if (env === 'development') {
+        // https://github.com/cdharris/react-app-rewire-hot-loader/issues/23#issuecomment-485193878
+        config.resolve.alias['react-dom'] = '@hot-loader/react-dom';
+    }
+
+    return rewireReactHotLoader(config, env);
+};

src/app/package.json

@@ -5,6 +5,7 @@
     "private": true,
     "dependencies": {
         "@google/markerclusterer": "1.0.3",
+        "@hot-loader/react-dom": "16.8.6",
         "@material-ui/core": "3.1.0",
         "@material-ui/icons": "3.0.1",
         "@turf/turf": "5.1.6",
@@ -13,14 +14,17 @@
         "core-js": "2.6.4",
         "file-saver": "2.0.0",
         "google-map-react": "1.1.2",
+        "http-proxy-middleware": "0.19.1",
         "immutability-helper": "2.9.0",
         "lodash": "4.17.11",
         "moment": "2.24.0",
         "prop-types": "15.6.2",
         "react": "16.8.6",
+        "react-app-rewire-hot-loader": "2.0.1",
+        "react-app-rewired": "2.1.3",
         "react-copy-to-clipboard": "5.0.1",
         "react-dom": "16.8.6",
-        "react-map-gl": "3.2.8",
+        "react-hot-loader": "4.9.0",
         "react-redux": "5.1.0",
         "react-router": "4.3.1",
         "react-router-dom": "4.3.1",
@@ -36,11 +40,11 @@
         "viewport-mercator-project": "5.1.0"
     },
     "scripts": {
-        "start": "PORT=6543 react-scripts start",
-        "build": "react-scripts build",
-        "test": "CI=1 react-scripts test --env=node",
+        "start": "PORT=6543 react-app-rewired start",
+        "build": "react-app-rewired build",
+        "test": "CI=1 react-app-rewired test --env=node",
         "lint": "eslint src/ --ext .js --ext .jsx",
-        "eject": "react-scripts eject"
+        "eject": "react-app-rewired eject"
     },
     "devDependencies": {
         "@babel/cli": "7.0.0-beta.49",
@@ -55,7 +59,6 @@
         "eslint-plugin-react": "7.11.1",
         "eslint-plugin-react-hooks": "1.6.0"
     },
-    "proxy": "http://django:8081",
     "browserslist": [
         ">0.2%",
         "not dead",

src/app/src/App.jsx

@@ -5,6 +5,7 @@ import { func } from 'prop-types';
 import { Router, Route, Switch } from 'react-router-dom';
 import { ToastContainer, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css'; // eslint-disable-line import/first
+import { hot } from 'react-hot-loader/root';
 
 import history from './util/history';
 import Navbar from './components/Navbar';
@@ -150,4 +151,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default connect(() => ({}), mapDispatchToProps)(withStyles(appStyles)(App));
+export default hot(connect(() => ({}), mapDispatchToProps)(withStyles(appStyles)(App)));

src/app/src/index.js

@@ -1,6 +1,6 @@
 // polyfills for IE11
 import 'core-js';
-
+import 'react-hot-loader';
 import React from 'react';
 import { render } from 'react-dom';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

src/app/src/setupProxy.js

@@ -0,0 +1,24 @@
+const proxy = require('http-proxy-middleware');
+const _ = require('lodash');
+
+const pathsToProxy = Object.freeze([
+    '/api',
+    '/web',
+    '/api-auth',
+    '/rest-auth',
+    '/user-login',
+    '/user-logout',
+    '/user-signup',
+    '/user-profile',
+    '/api-token-auth',
+    '/api-feature-flags',
+]);
+
+const djangoProxyTarget = Object.freeze({ target: 'http://django:8081' });
+
+const createProxies = app => _.forEach(
+    pathsToProxy,
+    path => app.use(proxy(path, djangoProxyTarget)),
+);
+
+module.exports = createProxies;