Skip to content
\n\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.

\n

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).

\n

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):

\n
\"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}
\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.

\n

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.

","upvoteCount":1,"answerCount":4,"acceptedAnswer":{"@type":"Answer","text":"

Hi there - glad to see people trying out Discussions.

\n

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.

\n

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.

\n

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.

\n

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.

","upvoteCount":1,"url":"https://github.com/single-spa/single-spa/discussions/695#discussioncomment-270203"}}}

Hot reload of a monorepo React app #695

Answered by jolyndenning
MV10 asked this question in Q&A
Discussion options

You must be logged in to vote

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…

Replies: 4 comments 3 replies

Comment options

You must be logged in to vote
3 replies
@jomgapuz
Comment options

@jolyndenning
Comment options

@frehner
Comment options

Answer selected by MV10
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

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