Bi-Directional Hosts

Bi-Directional Hosts Overview

At its core, bi-directional hosts is about doing one thing well inside your Module Federation project. Once you understand the pattern, you can apply it consistently across features and teams.

Good bi-directional hosts pays off across the whole codebase: fewer surprises, easier testing, and smoother onboarding. The snippet below is a solid starting point.

// host (webpack.config.js)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        catalog: 'catalog@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// usage
const ProductList = React.lazy(() => import('catalog/ProductList'));

The host declares remotes by URL and lazy-loads exposed modules like any dynamic import.

Bi-Directional Hosts 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 Bi-Directional Hosts example and grow it only as needed.
• Keep configuration explicit so Bi-Directional Hosts behaves the same in every environment.
• Name things clearly so teammates understand your Bi-Directional Hosts at a glance.
• Add tests around Bi-Directional Hosts early to lock in expected behaviour.

Module Federation Cheatsheet

Key Module Federation settings related to bi-directional hosts.

How Bi-Directional Hosts Works in Module Federation

Bi-Directional Hosts 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.

The host declares remotes by URL and lazy-loads exposed modules like any dynamic import.

• 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 Bi-Directional Hosts

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

Common Mistakes

• Copying bi-directional hosts snippets without understanding what each line does.
• Skipping error handling and edge cases when wiring up bi-directional hosts.
• Leaving bi-directional hosts untested, so regressions slip into production.
• Over-engineering bi-directional hosts before you actually need the extra flexibility.

Key Takeaways

• Bi-Directional Hosts is a core part of working effectively with Module Federation.
• Start small and keep bi-directional hosts focused on a single responsibility.
• Apply consistent patterns so bi-directional hosts scales across your project.
• Test and document bi-directional hosts to keep it maintainable over time.