Get hot reloading to work for development

config-overrides.js

@@ -0,0 +1,9 @@
+/* eslint-disable amo/only-tsx-files, @typescript-eslint/no-var-requires */
+const rewireReactHotLoader = require('react-app-rewire-hot-loader');
+
+// This overrides the Create React App config.
+// See https://github.com/cdharris/react-app-rewire-hot-loader
+module.exports = function override(config, env) {
+  const newConfig = rewireReactHotLoader(config, env);
+  return newConfig;
+};

package.json

@@ -32,10 +32,13 @@
     "prop-types": "15.7.2",
     "raven-js": "3.27.0",
     "react": "16.8.3",
+    "react-app-rewire-hot-loader": "2.0.1",
+    "react-app-rewired": "2.1.0",
     "react-bootstrap": "1.0.0-beta.5",
     "react-diff-view": "2.0.0-alpha.1",
     "react-dom": "16.8.3",
     "react-highlight": "0.12.0",
+    "react-hot-loader": "4.7.1",
     "react-redux": "5.1.1",
     "react-router-dom": "4.3.1",
     "react-scripts": "2.1.5",
@@ -78,19 +81,19 @@
     "type-coverage": "^1.8.0"
   },
   "scripts": {
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
     "build-local-dev-config": "cat .env.dev .env.common-local > .env.local",
     "build-local-stage-config": "cat .env.stage .env.common-local > .env.local",
     "dev": "yarn build-local-dev-config && yarn stmux-dev",
     "dev-2col": "yarn build-local-dev-config && yarn stmux [ 'yarn test' .. [ 'tsc -w' : 'yarn react-scripts-start' : 'yarn serve-dev' ] ]",
     "dev-servers": "yarn build-local-dev-config && yarn stmux [ 'yarn serve-dev' : 'yarn react-scripts-start' ]",
-    "eject": "react-scripts eject",
+    "eject": "react-app-rewired eject",
     "eslint": "eslint --ext ts --ext js --ext tsx src/",
     "lint": "yarn eslint",
     "prettier": "prettier --write '**'",
     "prettier-ci": "prettier --list-different '**' || (echo '\n\nThis failure means you did not run `yarn prettier-dev` before committing\n\n' && exit 1)",
     "prettier-dev": "pretty-quick --branch master",
-    "react-scripts-start": "PORT=3100 BROWSER=none react-scripts start",
+    "react-scripts-start": "PORT=3100 BROWSER=none react-app-rewired start",
     "serve": "NODE_ENV=production ts-node -O '{\"module\": \"commonjs\", \"typeRoots\": [\"./src/@types\"]}' scripts/server.tsx",
     "serve-dev": "NODE_ENV=development ts-node-dev -O '{\"module\": \"commonjs\", \"typeRoots\": [\"./src/@types\"]}' -- scripts/server.tsx",
     "stage": "yarn build-local-stage-config && yarn stmux-dev",
@@ -104,7 +107,7 @@
     "storybook-build": "build-storybook -c stories/setup",
     "storybook-deploy": "storybook-to-ghpages --script storybook-build",
     "storybook-smoke-test": "yarn storybook --smoke-test",
-    "test": "react-scripts test --reporters=default --reporters='<rootDir>/src/jest-reporters/eslint-check.js'",
+    "test": "react-app-rewired test --reporters=default --reporters='<rootDir>/src/jest-reporters/eslint-check.js'",
     "test-ci": "yarn test --coverage && codecov",
     "type-coverage": "type-coverage",
     "typecheck": "tsc"

src/components/App/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Container, Row } from 'react-bootstrap';
+import { hot } from 'react-hot-loader';
 import {
   Route,
   RouteComponentProps,
@@ -138,4 +139,8 @@ const mapStateToProps = (state: ApplicationState): PropsFromState => {
   };
 };
 
-export default withRouter(connect(mapStateToProps)(AppBase));
+const WrappedApp = withRouter(connect(mapStateToProps)(AppBase));
+
+export default (process.env.NODE_ENV === 'development'
+  ? hot(module)(WrappedApp)
+  : WrappedApp);

yarn.lock

@@ -5993,7 +5993,7 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
   integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
 
-fast-levenshtein@~2.0.4:
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@@ -6587,7 +6587,7 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-global@^4.3.2:
+global@^4.3.0, global@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
   integrity sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=
@@ -8869,6 +8869,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
+  integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==
+
 lodash.mergewith@^4.6.0:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
@@ -11503,6 +11508,20 @@ react-app-polyfill@^0.2.1:
     raf "3.4.1"
     whatwg-fetch "3.0.0"
 
+[email protected]:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-app-rewire-hot-loader/-/react-app-rewire-hot-loader-2.0.1.tgz#9b47d299dac4d861dafdf18b49c3698d0ff04a52"
+  integrity sha512-XTUPOv5q0zJeEtXECfilDPfqCiktSVbIyupiqigIHOO8EMZec2YfNpwZzqDWMu3yfaEHRs54qRCcCgRR/1w3EQ==
+
+[email protected]:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.0.tgz#8451acbf5e9d3d2252b259d4d531f60845817df4"
+  integrity sha512-eq0okL3shrAsg0u8HQQA1bYk/He/j4vNEQWZJyVZN7Lpb0/TOHSR0kyo8geGecIlUfgR0ABlw2X9sdxgm/beKQ==
+  dependencies:
+    cross-spawn "^6.0.5"
+    dotenv "^6.2.0"
+    semver "^5.6.0"
+
 [email protected]:
   version "1.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.0.0-beta.5.tgz#cf2c45a78bb0603c086d3fee3b454e21c3b5de6e"
@@ -11660,6 +11679,21 @@ [email protected]:
   dependencies:
     highlight.js "^9.11.0"
 
+[email protected]:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.7.1.tgz#1260b939297859cff35aff61412887a92c9b4275"
+  integrity sha512-OVq9tBndJ+KJWyWbj6kAkJbRVFx3Ykx+XOlndT3zyxAQMBFFygV+AS9RQi6Z2axkPIcEkuE5K6nkpcjlzR8I9w==
+  dependencies:
+    fast-levenshtein "^2.0.6"
+    global "^4.3.0"
+    hoist-non-react-statics "^2.5.0"
+    loader-utils "^1.1.0"
+    lodash.merge "^4.6.1"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.0.2"
+    source-map "^0.7.3"
+
 react-inspector@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.1.tgz#f0eb7f520669b545b441af9d38ec6d706e5f649c"
@@ -12739,7 +12773,7 @@ shallow-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.0.0.tgz#508d1838b3de590ab8757b011b25e430900945f7"
   integrity sha1-UI0YOLPeWQq4dXsBGyXkMJAJRfc=
 
-shallowequal@^1.1.0:
+shallowequal@^1.0.2, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -12945,6 +12979,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 space-separated-tokens@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz#e95ab9d19ae841e200808cd96bc7bd0adbbb3412"