React Host Application

React Host Application Overview

At its core, react host application 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 react host application 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.

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

Module Federation Cheatsheet

Key Module Federation settings related to react host application.

How React Host Application Works in Module Federation

React Host Application 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 React Host Application

In production, react host application 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 react host application.
• Leaving react host application untested, so regressions slip into production.
• Over-engineering react host application before you actually need the extra flexibility.
• Ignoring documentation, which makes react host application hard for the next developer to change.

Key Takeaways

• React Host Application is a core part of working effectively with Module Federation.
• Start small and keep react host application focused on a single responsibility.
• Apply consistent patterns so react host application scales across your project.
• Test and document react host application to keep it maintainable over time.