Render one micro frontend within another using React

Question

We have recently started migrating our monolithic enterprise application to a more modular, micro-service architecture. As part of this process, we have decided to create a dedicated standalone frontend for each service written in React. These micro frontends will then be rendered within a parent framework that is responsible for managing common components across the application - headers, footers, menu drawers, authentication state, etc.

For illustrative purposes, let us describe these microservices as follows:

1. The Address Service is responsible for managing user addresses through a simple CRUD interface. There is a grid listing all current addresses, and a form for capturing new ones.
2. The Checkout Service allows users to checkout the items they have bought, during which one of the steps is to select a delivery address from those that were captured in the previous service.

Up until this point, there are no issues with our architecture.

Now say we wanted to allow users to not only select an existing address during checkout, but to also be able to add a new address during this process, without first having to leave the checkout process to go to the dedicated address management screen within the Address Service.

What we effectively want to do be able to do is:

• Render the complete add new address form, including all validation rules, drop down lookups, language translations, etc. of the one frontend within the other.
• On submit, add this new address to the user's list of selectable addresses without re-loading the entire page - basically just splice the new address into the current state.

Is there some way to achieve something like this? My feeling is that it goes against the entire concept of separating these two items out into their own frontends to begin with, and they may be better off just being combined into one. But what if we wanted to render this address component in other services in the future? Surely a monolithic frontend that continues to grow is not the only viable solution?

Answer 1

Microfrontends usually have some kind of event bus to communicate one MF to another. You can use custom events to implement this. But you can build your own implementation in your base framework.