Hot reload of a monorepo React app

[MV10]

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:

source
  |--apps
  |    |--reactapp1
  |    |--reactapp2
  |    |--reactapp3
  |
  |--main
  |    |--dist
  |
  |--shared
       |--component1
       |--component2

• source is the Lerna monorepo root (git is here, etc.)
• reactappX are pretty typical React applications
• main is the root-config
• componentX are various reusable packages, APIs, models, etc.

I configured all of the apps and components so that their build output goes to main/dist, which allows us to use lerna run --parallel to invoke webpack serve in the root-config directory (main) and webpack --watch in each app and shared content directory. This required adding --content-base ./dist to the serve command in order to also serve the compiled .js files from the other apps and components outside of root-config.

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 main/dist don't trigger a hot reload (and I'm sure this isn't how hot reload is meant to work under the hood, but I'm still learning my way around this stuff).

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 webpack serve ... here's an example from one of the React app's package.json. Lerna will invoke the "dev" script (and I'm on Windows here, obviously):

"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 main/dist, index.html and all the other bundles are still available, but for whatever reason it won't serve them, so obviously I'm misunderstanding some piece of the puzzle.

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.

[joeldenning]

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 without setting it in two places. The sockPort and sockHost options can sometimes be required. See more info at https://v4.webpack.js.org/configuration/dev-server/#devserversockport and https://v4.webpack.js.org/configuration/dev-server/#devserversockhost.

If you're using webpack 5, the sockPort and sockHost options have been renamed/removed. Instead, you need to set config.devServer.client.port and config.devServer.client.host. Those options aren't in the documentation right now from what I've seen, but you can see the runtime type checks for them at https://github.com/webpack/webpack-dev-server/blob/9e3a481f311e2006c08193f4a18c1ef0515ef542/lib/options.json#L65 and https://github.com/webpack/webpack-dev-server/blob/9e3a481f311e2006c08193f4a18c1ef0515ef542/lib/options.json#L71. Another thing to note here is that unless you're using the latest version of webpack-cli 4, you'll need to specify those options manually - letting webpack find a port for you won't work until you're using the code in webpack/webpack-cli#2147.

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.

[jomgapuz]

Any updates with this one? @frehner confirmed that this, pmmmwh/react-refresh-webpack-plugin#236, is not working. Will single-spa have their own library/implementation of react-refresh?

[joeldenning]

We don't plan on forking react refresh - any bugs with it that prevent it working with single-spa should be reported and fixed. I think that @frehner worked on this a while ago, but don't know current status.

[frehner]

Last I checked, things were working. But there have been additional betas that have come out.

[MV10]

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 webpack serve and in all the other projects run --watch? I'll try to apply what you've explained here. I'm using webpack 4.45.0 FWIW.

Edit: To get page reload (not HMR) working, I merely added --watch-content-base to my "serve" process. After reviewing what you've written I see that HMR isn't quite as seamless as I'd thought!

[joeldenning]

No, each application should be running webpack serve and have their own unique webpack-dev-server and port. Each will hot reload individually.

[MathieuVedana]

Hello all,

I am spending some time on fast refresh right now and I see a difficulty when considering utils packages.
I have made a repo that works well when updating app1 running with react and react-refresh, it performs a fast refresh of app1 only :)

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:

• why is it reloading, is-it because of app1 or utils1 webpack instance !?
• where the optimization to avoid full page reload shall be done, on app1, utils1 or root-config?

Hope you have some ideas to share :)

I attach below a HAR that contains network traffic after saving utils1 file.
HAR file

Idem for Webpack logs:

[@mma/app1]: assets by status 679 KiB [cached] 1 asset
[@mma/app1]: asset index.html 3.04 KiB [emitted]
[@mma/app1]: cached modules 437 KiB (javascript) 28.4 KiB (runtime) [cached] 202 modules
[@mma/app1]: webpack 5.78.0 compiled successfully in 150 ms
[@mma/utils1]: assets by path *.js 257 KiB
[@mma/utils1]:   asset mma-utils1.js 256 KiB [emitted] (name: main) 1 related asset
[@mma/utils1]:   asset main.075e54133012e4c9c6b9.hot-update.js 1.17 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
[@mma/utils1]: asset index.html 3.05 KiB [emitted]
[@mma/utils1]: asset main.075e54133012e4c9c6b9.hot-update.json 28 bytes [emitted] [immutable] [hmr]
[@mma/utils1]: Entrypoint main 257 KiB (288 KiB) = mma-utils1.js 256 KiB main.075e54133012e4c9c6b9.hot-update.js 1.17 KiB 2 auxiliary assets
[@mma/utils1]: cached modules 177 KiB [cached] 29 modules
[@mma/utils1]: runtime modules 26.3 KiB 12 modules
[@mma/utils1]: ./src/mma-utils1.ts 280 bytes [built] [code generated]
[@mma/utils1]: webpack 5.78.0 compiled successfully in 181 ms
[@mma/utils1]: No errors found.
[@mma/app1]: Type-checking in progress...
[@mma/app1]: No errors found.

Idem for browser console log:

[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
log.js:24 [HMR] Waiting for update signal from WDS...
index.js:485 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
log.js:24 [HMR] Waiting for update signal from WDS...
index.js:485 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
log.js:24 [HMR] Waiting for update signal from WDS...
index.js:485 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
log.js:24 [HMR] Waiting for update signal from WDS...

Working project repo branch
https://github.com/MathieuVedana/single-spa-typescript-yarn-worspace/tree/fastrefresh