Setting up Microfrontends with a Host and Remote app

We are going to take our multi-SPA app and convert it into a microfrontend with a Host and Remote app using Module Federation. As mentioned earlier, the main benefit of this approach is that users get a true single-page experience while still ensuring that each app is independently built and deployed.

Let us see what it takes for us to do this:

Figure 5.2 – Module Federation setup

You will notice that Figure 5.2 is similar to Figure 5.1 and explains the implementation details of Module Federation. We see that the Host app contains the header component and runs on port 4200. We then have our Catalog and Checkout apps running on ports 4202 and 4201. We aim to load these remote apps dynamically whenever the correct route is called.

To convert our multi-SPA into a module-federated microfrontend, we will need to make the following changes:

1. Create a new Host app that we’ll call...