Building our Multi-SPA Microfrontend

Building a multi-SPA microfrontend essentially consists of three broad areas: breaking down the app into logical mini-apps, then we need to set up the routing between these mini-apps, and finally, we set up a global state the different mini-apps can read and write data to. Let us look at each of them in the subsequent sections.

Setting up our mini-apps

We will start with where we left off in the previous chapter.

In case you skipped the previous chapter and are directly jumping in here, you can start by cloning the repo from https://github.com/PacktPublishing/Building-Micro-Frontends-with-React/tree/main/ch3/my-mfe.

Let us quickly run pnpm install (if you haven’t already done so) and serve the respective apps to make sure that they are running properly.

Since we are going to build an e-commerce application, let us call our app eBuy. Feel free to rename your app folder to ebuy.

During active development, we would ideally...