Hot reload of a monorepo React app #695
-
I'll take the plunge and post the very first discussion! A few weeks ago Joel gave me some very helpful ideas about how we might get our single-spa monorepo running behind a single localhost port. (This is for very early-stage development, later we'll follow the recommended approach of deploying to a server, although we'll stick with a monorepo.) I have it working, sort of, but I'm running into something that I believe is single-spa specific -- but my fault or misunderstanding, hence the discussion rather than an issue. Our directory structure looks like this:
I configured all of the apps and components so that their build output goes to Everything serves properly (thank you Joel), but this means hot reload only works for the root-config. Webpack will recompile changes in the other watched projects, but apparently updates to While it would be nice to get hot reload working across the board, I figured a good stopgap would be to figure out a way to pick and choose which app had hot reload available. I tried doing this by adding an .npmrc variable at the Lerna level to control which project runs "scripts": {
"dev": "if [%npm_config_hot_project%]==[%npm_package_name%] (npm start) else (npm run watch)",
"start": "webpack serve --content-base ../../main/dist --mode=development --https --port 9000 --env isLocal=true",
"watch": "webpack --watch --mode=development --env isLocal=true"
} To my surprise, for anything but the root-config, I get the "Your Microfrontend is not here" page. Since these other projects serve from Is there a reasonable way to work around this? We don't anticipate much value in actually running our apps stand-alone, so I'm not worried about anything that would impact that. |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 3 replies
-
Hi there - glad to see people trying out Discussions. Hot reloading requires that webpack-dev-server's runtime sets up a websocket connection to the webpack-dev-server for that project. It makes a request to a path on the server that's something like If you're using webpack 4, the web socket connection should open to the correct URL automatically if you let webpack find a port for each project, or if you hard code the port via CLI command If you're using webpack 5, the sockPort and sockHost options have been renamed/removed. Instead, you need to set Once the port is properly set up, webpack by default will send a push notification to the browser over the websocket whenever the code has recompiled. By default, webpack-dev-server will force a page reload when that happens (not hot reload). If you're looking for hot reloading, try using https://github.com/pmmmwh/react-refresh-webpack-plugin. If using systemjs, make sure you use the latest version of the plugin, since pmmmwh/react-refresh-webpack-plugin#236 (authored by single-spa core team member @frehner) is needed for things to work. |
Beta Was this translation helpful? Give feedback.
-
Hi Joel, thanks for the detailed explanation. I didn't mean to drag you into a hot-reload tutorial! Apart from the details of hot-reload, does it look like I'm on the right track here? Run one Edit: To get page reload (not HMR) working, I merely added |
Beta Was this translation helpful? Give feedback.
-
No, each application should be running |
Beta Was this translation helpful? Give feedback.
-
Hello all, I am spending some time on fast refresh right now and I see a difficulty when considering utils packages. However, if I update an utils1 package (used in app1) which has no relation with react, it reloads all the app. I have few question pending about utils1:
Hope you have some ideas to share :) I attach below a HAR that contains network traffic after saving utils1 file. Idem for Webpack logs:
Idem for browser console log:
Working project repo branch |
Beta Was this translation helpful? Give feedback.
Hi there - glad to see people trying out Discussions.
Hot reloading requires that webpack-dev-server's runtime sets up a websocket connection to the webpack-dev-server for that project. It makes a request to a path on the server that's something like
/web-socket/info
(I don't remember the exact path). You should be able to see those in the network tab to confirm that they're each going to the correct port.If you're using webpack 4, the web socket connection should open to the correct URL automatically if you let webpack find a port for each project, or if you hard code the port via CLI command
--port 8080
. However, it can sometimes not work if you set the port in the webpack config witho…