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.
","upvoteCount":1,"answerCount":4,"acceptedAnswer":{"@type":"Answer","text":"Hi there - glad to see people trying out Discussions.
\nHot 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.
","upvoteCount":1,"url":"https://github.com/single-spa/single-spa/discussions/695#discussioncomment-270203"}}}-
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.
-
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…