React Micro frontends with Module Federation
Understand what Micro Frontends are and why Module Federation is useful
The idea behind micro frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross-functional and develops its features end-to-end, from database to user interface.
Micro Frontend Approach: Horizontal split
A horizontal split allows you to have multiple micro frontends at a time in each view. Usually, it is the most common strategy in business domains with multiple reusable parts.
In this scenario, we have a host called application, a bidirectional host called components, and a remote called loading. In plain English: firstly, the remote will expose a single loading component. Secondly, the bidirectional host will import the loading component, apply some CSS and then re-expose it. Additionally, it exposes a rounded button.
Finally, the host will include these two components that will be shown to the user. Before diving into the code, you should know that:
this example uses a horizontal split with client-side composition;
each package in the monorepo has been generated using create-react-app and then extended with craco to override the Webpack configuration using a dedicated plugin that reads and applies the module federation configuration of each package;
although the provided code is organised as a monorepo, the same idea works with multiple repos or any other kind of development strategy;
each federated module can be used as an independent React application.