Versioned Deployment

Understanding versioned deployment helps you work with Module Federation confidently. Here you will learn the core ideas behind versioned deployment, see working code, and pick up best practices used on real teams.

Versioned Deployment Overview

Versioned Deployment is a building block you will reach for often in Module Federation. It keeps related logic together and makes your intent obvious to reviewers and future maintainers.

When you learn versioned deployment properly, you avoid the guesswork that leads to bugs and rework. The example below shows the shape you will use in most real Module Federation projects.

new ModuleFederationPlugin({
  name: 'shell',
  shared: {
    react: { singleton: true, requiredVersion: '^18.2.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
  },
});

Marking shared libraries as singletons ensures one React instance is used across all micro frontends.

Versioned Deployment Example

new ModuleFederationPlugin({
  name: 'app',
  filename: 'remoteEntry.js',
  exposes: { './Widget': './src/Widget' },
  remotes: { other: 'other@http://host/remoteEntry.js' },
  shared: { react: { singleton: true } },
});

Start from a minimal Versioned Deployment example and grow it only as needed.
Keep configuration explicit so Versioned Deployment behaves the same in every environment.
Name things clearly so teammates understand your Versioned Deployment at a glance.
Add tests around Versioned Deployment early to lock in expected behaviour.

Module Federation Cheatsheet

Key Module Federation settings related to versioned deployment.

Option	Example	Purpose
name	`name: 'shell'`	Unique container name
filename	`filename: 'remoteEntry.js'`	Remote entry manifest
exposes	`exposes: { './X': './src/X' }`	Modules a remote shares
remotes	`remotes: { app: 'app@url' }`	Remotes a host consumes
shared	`shared: { react: { singleton: true } }`	Deduplicate libraries
lazy load	`import('remote/Module')`	Load remotes on demand
Suspense	`<Suspense fallback={...}>`	Handle async loading

How Versioned Deployment Works in Module Federation

Versioned Deployment builds on Module Federation's ability to load code from another independently built and deployed application at runtime. Each app can be a host, a remote, or both.

Marking shared libraries as singletons ensures one React instance is used across all micro frontends.

Remotes expose modules through a remoteEntry.js manifest.
Hosts declare remotes and import exposed modules dynamically.
Shared dependencies are deduplicated, ideally as singletons.
Each micro frontend builds and deploys on its own schedule.

Practical Guidance for Versioned Deployment

In production, versioned deployment needs careful version management and graceful failure handling. Align shared dependency versions and always render a fallback when a remote cannot load.

Concern	Recommendation
Shared versions	Use singletons with requiredVersion
Runtime errors	Wrap remotes in error boundaries and fallbacks
Deployment	Resolve remotes from a runtime manifest
Performance	Lazy-load remotes and cache remoteEntry.js

Common Mistakes

Skipping error handling and edge cases when wiring up versioned deployment.
Leaving versioned deployment untested, so regressions slip into production.
Over-engineering versioned deployment before you actually need the extra flexibility.
Ignoring documentation, which makes versioned deployment hard for the next developer to change.

Key Takeaways

Versioned Deployment is a core part of working effectively with Module Federation.
Start small and keep versioned deployment focused on a single responsibility.
Apply consistent patterns so versioned deployment scales across your project.
Test and document versioned deployment to keep it maintainable over time.

Pro Tip

Pair versioned deployment with automated tests from day one. It is far cheaper to catch Module Federation regressions in CI than in production.