2

TLDR; How to use a single context between react micro frontends?

The application is divided into multiple Microfrontends or react apps. Each of these is running on a different port. A container is hosting other Micrfrontends. Each one is a separate react app and it is a runtime integration. (I have used martinfowler example to implement micro frontend)

Currently passing some data via URL and browser storage (localStorage/cookies) to other Microfrontends.

I need to pass the data across these react apps (MFEs) using React Context.

I have defined ReactContext Provider in Container (ReactApp1) and stored value (say color=black). To access this color inside the lower level Microfrontend (ReactApp2) we need the context to be available from any micro frontend. How to make it available?

(NOTE: I don't want to use localStorage or cookies for global data sharing)

<Container>
  <LowerLevelMFE1/>
  <LowerLevelMFE2/>
  ...
</Container>
Mohit Saini
  • 21
  • 1
  • 3
  • That's probably going to be very tough with just contexts considering their identities would need to be managed in the window scope (so just `createContext` without a wrapper would not cut it) - you might want to consider a state management solution that uses e.g. custom window-level events for propagation... – AKX Mar 18 '22 at 19:51
  • Thank you for quick response. Can you pls give an example? At the end I am looking for a solution that would manage state. Any change in the state variable in one MFE should be listened in other MFE. As I said color =black when changed in one MFE, the other MFE should know this and reflect the necessary change in it. I was thinking to use one context and render all of the child MFEs inside this MainContext – Mohit Saini Mar 22 '22 at 02:58

3 Answers3

7

I think sharing context between Micro-frontends is an anti-pattern and should be avoided if you can. If you use context to share data, you will automatically couple the MFes that depend on the context, eliminating the benefits of independent deployments by introducing coordination and a dependency.

My advice is that each micro-frontend loads the data they need and if there is communication need it, you need an api or a contract to handle this communication.

Ruben Casas
  • 113
  • 3
4

I think if you need that type of comunication between the mfe's then they are splited wrong.

As Ruben says, is an anti pattern.

sohaso
  • 107
  • 2
  • 8
3

Webpack 5's Module Federation & ModuleFederationPlugin is the best way I've found to achieve this architectural pattern.

In essence you create a "host" application that wraps the React.context around a "remote" component. This "remote" is actually another component in a standalone application that is being exposed as a remote through its webpack config file. In this 2nd application you would consume the context as normal using React.useContext.

You can find a full example of this setup here on github.

A few things to note:

  1. Both applications will need to consume this Context's source code so moving it into its own package is preferred.
  2. Your Context consuming application will still need, what I call in MFEs, "developer scaffolding". In this case that would be a simple component that wraps your <ContextConsumer /> in a <ContextProvider /> that you are importing from your shared Context package I mentioned in 1.
    • Remember this app with scaffolding is only exposing the <ContextConsumer /> which you need to make sure to specify in the webpack config.
jpkiser
  • 39
  • 2