Framework-Agnostic Remotes

Framework-Agnostic Remotes Overview

Framework-Agnostic Remotes 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 framework-agnostic remotes 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.

const { ModuleFederationPlugin } = require('webpack').container;

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

ModuleFederationPlugin configures which modules an app exposes, consumes, and shares.

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

Module Federation Cheatsheet

Key Module Federation settings related to framework-agnostic remotes.

How Framework-Agnostic Remotes Works in Module Federation

Framework-Agnostic Remotes 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.

ModuleFederationPlugin configures which modules an app exposes, consumes, and shares.

• 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 Framework-Agnostic Remotes

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

Common Mistakes

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

Key Takeaways

• Framework-Agnostic Remotes is a core part of working effectively with Module Federation.
• Start small and keep framework-agnostic remotes focused on a single responsibility.
• Apply consistent patterns so framework-agnostic remotes scales across your project.
• Test and document framework-agnostic remotes to keep it maintainable over time.