Sharing State and Utilities Across Remotes
Learn advanced patterns for sharing not just libraries but stateful stores, design tokens, and utility modules safely across federated remotes.
Sharing State and Utilities Across Remotes is a free Micro Frontends Architecture with Module Federation lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Micro Frontends Architecture with Module Federation learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Beyond Libraries
Module Federation can share more than third-party libraries. You can expose your own stateful stores, utilities, and design tokens so all remotes use one consistent source.
Sharing a Utility Module
Expose a shared utilities package from one app and consume it everywhere, eliminating copy-pasted helper code.
exposes: { "./format": "./src/utils/format" }
// elsewhere
import { formatPrice } from "shared/format";Sharing Design Tokens
Expose colors, spacing, and typography as a shared module so every micro frontend stays visually consistent without bundling its own copy of the theme.
exposes: { "./tokens": "./src/theme/tokens" }Sharing a State Store
A shared store (e.g. a Redux or Zustand instance) lets remotes read and update common data. The key is sharing a single instance, not separate copies.
Why Singleton Matters for State
If two remotes each load their own store, their state diverges. Marking the store package singleton: true guarantees they share the same live instance.
shared: {
"@app/store": { singleton: true }
}Exposing the Store Instance
Expose the already-created store, not a factory, so consumers attach to the same object.
import { createStore } from "./store";
export const store = createStore();
// exposes: { "./store": "./src/store-instance" }Consuming Shared State
Remotes import the shared store and subscribe to it like any local store, but updates from any remote are visible to all.
import { store } from "shell/store";
store.subscribe(() => render(store.getState()));The Coupling Trade-off
Shared mutable state increases coupling. Overuse recreates the tight dependencies micro frontends try to avoid. Share state only for truly cross-cutting concerns like auth or cart.
Prefer Events for Loose Coupling
Where possible, prefer a shared event channel over a shared mutable store. Events keep remotes decoupled while still letting them react to each other.
Versioning Shared State Contracts
Treat the shape of shared state and utilities as a public contract. Changing it is a breaking change, so version it and communicate updates to consuming teams.
A Layered Sharing Strategy
A healthy strategy layers sharing:
- Libraries: share freely (React, etc.)
- Utilities and tokens: share for consistency
- Mutable state: share sparingly and deliberately
Quick Check
Test your advanced sharing knowledge.
Recap
You learned advanced sharing:
- Share utilities and design tokens for consistency
- Share a singleton store for cross-cutting state
- Expose the instance, not a factory
- Prefer events to limit coupling
- Version shared contracts carefully
Thoughtful sharing balances consistency with independence.
Frequently asked questions
Is the “Sharing State and Utilities Across Remotes” lesson free?
Yes — the full text of “Sharing State and Utilities Across Remotes” is free to read here on the web, and the Micro Frontends Architecture with Module Federation course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Micro Frontends Architecture with Module Federation course, upgrade to CoddyKit PRO.
What will I learn in “Sharing State and Utilities Across Remotes”?
Learn advanced patterns for sharing not just libraries but stateful stores, design tokens, and utility modules safely across federated remotes. You practise Micro Frontends Architecture with Module Federation with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Micro Frontends Architecture with Module Federation?
No prior experience is required. Micro Frontends Architecture with Module Federation on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Sharing State and Utilities Across Remotes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Micro Frontends Architecture with Module Federation lesson?
Yes. Every Micro Frontends Architecture with Module Federation lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Consuming Shared Dependencies
- Singleton Modules & Versioning
- Dynamic Module Loading
- Sharing State and Utilities Across Remotes