Micro Frontends Architecture

As frontend teams expand, monolithic codebases become major bottlenecks. Micro Frontend architecture splits a single web application into independent, decoupled micro-apps that can be developed, tested, and deployed individually by separate teams.

Webpack / Rspack Module Federation

Module Federation is the industry standard tool for runtime code integration. A host application can download compiled JavaScript components from a remote server dynamically at runtime without requiring a hard rebuild or version dependency updates.

// webpack.config.js on Remote App
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "auth_app",
      filename: "remoteEntry.js",
      exposes: {
        "./LoginForm": "./src/components/LoginForm.jsx",
      },
      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
  ],
};

Key Design Rules

• Zero Shared State in LocalStorage: Micro frontends should communicate via custom events or light messaging buses rather than tight context sharing.
• CSS Sandboxing: Utilize Tailwind prefixes, CSS modules, or Shadow DOM scopes to prevent styles from bleeding across micro applications.
• Graceful Degradation: If a remote server falls offline, the host must catch the network load failure and render fallback UI placeholders.