Configure hot reloading for React app during development #556
Conversation
|
How concerned should we be about the 🚨, ☠️, and |
Seems like the FWIW apparently Raster Foundry made use of react-app-rewired in a production app used internally, so there's some experience with it here already. |
|
Taking a look now. |
|
Thanks! #558 is for the URL routes. |
- add react-app-rewired to customize Create React App config without ejecting - add & configure hot-reloading related libraries - adjust development proxy to API: the prior setup was intercepting all requests which were not caught by React Router including the websocket requests by which webpack-dev-server hot module reloading would get propagated. The new setup proxies an enumerated set of url paths to match the set in Django's urls.py file
Remove react-mapgl dependency, as it is no longer used.
kellyi
force-pushed
the
ki/configure-hot-reloading
branch
from
2f7dda9
to
3035e95
Compare
|
Thanks for taking a look! |
| path => app.use(proxy(path, djangoProxyTarget)), | ||
| ); | ||
|
|
||
| module.exports = createProxies; |
There was a problem hiding this comment.
I see statements like
[HPM] Proxy created: /api -> http://django:8081
being printed to my console, but I don't see in this PR where createProxies is being called. How is this wired in to the dev server?
There was a problem hiding this comment.
If a src/setupProxies.js file exists, the default export gets called as a function by Create React App: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually
There was a problem hiding this comment.
👍 Thanks for providing that pointer to the documentation.
Overview
This PR configures hot reloading for the React app during development. To accomplish this without ejecting from CRA, I brought in
Setting this up also required adjusting our development proxy settings because the previous setup would route all requests not caught by React Router to Django -- including the websocket requests used by Webpack Dev Server to push hot updates. (This was the source, btw, of the frequent error messages about the socket disconnecting during development). To fix that I followed the guide here -- https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually -- to set up a manual proxy.
Since not all of our API routes are prefixed with
/api/, I created a list of the routes from urls.py and then looped over them to set up proxies. It seemed like this change would have a smaller impact than trying to update the Django routing here. (I think we should eventually update the Django routing, but it's out of scope for this issue.)The result is that we now have hot reloading in development.
Connects #549
Notes
Second commit here drops an unused dependency on react-mapgl that I noticed when messing with the package.json file.
Testing Instructions
./scripts/update./scripts/serverthen visit the development app at http://localhost:6543FilterSidebarSearchTabcomponent locally, then save. Verify that after saving the changes are rendered without refreshing the page and that the previous app state is maintainedChecklist
fixup!commits have been squashed