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

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\": {\n  \"dev\": \"if [%npm_config_hot_project%]==[%npm_package_name%] (npm start) else (npm run watch)\",\n  \"start\": \"webpack serve --content-base ../../main/dist --mode=development --https --port 9000 --env isLocal=true\",\n  \"watch\": \"webpack --watch --mode=development --env isLocal=true\"\n}

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.

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.

Hot reload of a monorepo React app #695

Answered by jolyndenning

MV10 asked this question in Q&A

Hot reload of a monorepo React app #695

MV10

Jan 7, 2021 · 4 comments · 3 replies

Answered by jolyndenning Return to top

Discussion options

edited

MV10

Jan 7, 2021

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.

1 You must be logged in to vote

👍 1

Answered by jolyndenning Jan 8, 2021

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…

View full answer

Replies: 4 comments · 3 replies

Comment options

jolyndenning

Jan 8, 2021

Maintainer

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.

Marked as answer

1 You must be logged in to vote

👍 1

3 replies

Comment options

jomgapuz May 28, 2021

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?

Comment options

jolyndenning Jun 1, 2021

Maintainer

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.

Comment options

frehner Jun 1, 2021

Maintainer

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

Answer selected by MV10

Comment options

edited

MV10

Jan 9, 2021

Author

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!

1 You must be logged in to vote

0 replies

Comment options

jolyndenning

Jan 12, 2021

Maintainer

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

1 You must be logged in to vote

0 replies

Comment options

MathieuVedana

Apr 10, 2023

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

1 You must be logged in to vote

0 replies

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Category

🙏

Q&A

Labels

None yet

5 participants