2

We are trying to figure out how to get webpack to hot reload multiple apps behind a single localhost port. We have a React-based single-spa (micro-frontend) system of applications in a Lerna-driven monorepo. (This is very early-stage development, so we don't have dedicated servers available yet, so the recommended single-spa approach of deploying everything except the one app being modified is not possible.)

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 single-spa root-config (index.html, startup, routing, etc.)
  • componentX are various reusable packages, APIs, models, etc.

What we've done is 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 main folder and webpack --watch in each app and shared folder.

However, this required adding --content-base ./dist to the serve command in order to also serve the compiled .js files from the non-main apps and components, which is where I think the trouble starts.

Everything serves properly, and when main/src is updated, webpack recompiles and the browser reloads automatically. However, if I modify something like reactapp1/src or component1/src I see the webpack watcher recompile, but the server process doesn't recognize that the .js changed in main/dist. We have to manually refresh the browser.

Is there a reasonably standardized way to get this working, or are we headed in the wrong direction?

(And before anyone says "don't do this" -- we realize this will scale poorly as the app grows, this is only to support the initial dev work. We're in a big corporate environment and allocating servers is an endless mess of paperwork and approvals and bureaucracy. Eventually we'll follow the recommended pattern of deploying most of the apps and shared bundles to a dedicated server.)

McGuireV10
  • 9,572
  • 5
  • 48
  • 64

1 Answers1

1

In order to get page reload working, I only had to add the --watch-content-base switch to my "serve" process. At that point the scenario in my question does reload the page automatically when any of the apps are modified. (The more useful hot module replacement / HMR is considerably more involved and isn't really what we're after at this early stage.)

Serve script (runs in "main", the single-spa root-config app):

"start": "webpack serve --content-base ../../main/dist --watch-content-base --mode=development --https --port 9000 --env isLocal=true"

Watch script (unchanged, runs in all other app directories):

"watch": "webpack --watch --mode=development --env isLocal=true"

This is using webpack 4.45.0.

McGuireV10
  • 9,572
  • 5
  • 48
  • 64