Architecture Help Needed

Implementing clean micro-frontend architecture in modern enterprise apps

Author Avatar
Marcus Chen verified
Joined Mar 2021 •
star star star star star_half
(4.8)

I'm currently leading a team transitioning a large monolithic dashboard into a micro-frontend architecture using Webpack Module Federation. While the technical integration is smoothing out, I'm struggling with the organizational and structural aspects regarding shared state and design system consistency.

Specifically, how are you all handling global state (like user authentication tokens and theme preferences) across independent deployments without tightly coupling the host application to the remotes? We've tried a custom event bus, but it feels fragile.

"The goal is independent deployability, but the reality often looks like a distributed monolith if shared dependencies aren't managed carefully."

Any insights on best practices for shared library management (like React/ReactDOM) to prevent version conflicts while still allowing individual teams autonomy would be greatly appreciated. Examples of architectural diagrams or repository structures would be amazing.

Discussion

Sort by:
Commenter Avatar
David Ross 2 hours ago

We solved the shared state issue by treating the host application purely as a routing shell. It provides a React Context provider at the root that exposes a global event bus (we use zustand for this, keeping it extremely lightweight). Remotes subscribe only to specific slices of state they care about.

Commenter Avatar
Elena Rodriguez Author 1 hour ago

That makes sense. Are you bundling Zustand in the host and sharing it via Module Federation, or does each remote bundle its own copy and just listen to browser events?

T
TechLead_Tom 5 hours ago

For shared libraries like React, you *must* list them as singletons in your Webpack config for Federation. If you don't, you'll end up with multiple instances of React running, which immediately breaks hooks.

`shared: { react: { singleton: true, requiredVersion: deps.react } }` is your friend here.