From f6652d02ce03e17a321a2652b7c868195bd395fc Mon Sep 17 00:00:00 2001 From: Kumar McMillan Date: Mon, 25 Feb 2019 14:54:58 -0600 Subject: [PATCH] Get hot reloading to work for development --- config-overrides.js | 9 ++++++++ package.json | 11 +++++---- src/components/App/index.tsx | 7 +++++- yarn.lock | 45 +++++++++++++++++++++++++++++++++--- 4 files changed, 64 insertions(+), 8 deletions(-) create mode 100644 config-overrides.js diff --git a/config-overrides.js b/config-overrides.js new file mode 100644 index 000000000..a976f3ffe --- /dev/null +++ b/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; +}; diff --git a/package.json b/package.json index ea7a6e8b3..2b72f404f 100644 --- a/package.json +++ b/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='/src/jest-reporters/eslint-check.js'", + "test": "react-app-rewired test --reporters=default --reporters='/src/jest-reporters/eslint-check.js'", "test-ci": "yarn test --coverage && codecov", "type-coverage": "type-coverage", "typecheck": "tsc" diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index b97a61ad8..d54090d4d 100644 --- a/src/components/App/index.tsx +++ b/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); diff --git a/yarn.lock b/yarn.lock index 3dd970057..50d7402d2 100644 --- a/yarn.lock +++ b/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" +react-app-rewire-hot-loader@2.0.1: + 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== + +react-app-rewired@2.1.0: + 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" + react-bootstrap@1.0.0-beta.5: 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 @@ react-highlight@0.12.0: dependencies: highlight.js "^9.11.0" +react-hot-loader@4.7.1: + 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"