React Micro-Frontends

Split large apps into smaller, independent pieces.

Module Federation (Webpack 5)

// webpack.config.js (Host)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js'
      }
    })
  ]
};

// webpack.config.js (Remote)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button'
      }
    })
  ]
};

Loading Remote Component

const RemoteButton = React.lazy(() => import('app1/Button'));

function App() {
  return (
    <Suspense fallback="Loading...">
      <RemoteButton />
    </Suspense>
  );
}

Benefits

• Independent deployment
• Technology diversity
• Team autonomy
• Scalability

Challenges

• Shared dependencies
• Communication between apps
• Consistent UX
• Testing complexity

Remember

• Use for large teams
• Independent deployments
• Shared state management
• Clear boundaries

Next: Learn animation libraries!