webpack-module-federation

A sample app to demonstrate webpack's module federation capabilities.

---

---

Blog

https://gaurav-techgeek.medium.com/micro-frontends-just-got-better-with-module-federation-b062dba9647b

Remote App

A basic react app that exposes a component called "Greet", that just prints hello to the name passed as prop.

Host App

A react app that imports Greet component from the remote app through webpack's module federation & renders it with a name.

How to run

• in host & remote folders run npm i & npm start
• Remote app serves on http://localhost:5000
• Host app serves on http://localhost:5001

Folder structure

Exposing Greet component from remote app

plugins: [
  new ModuleFederationPlugin({
    name: "remote",
    filename: "remoteEntry.js",
    exposes: {
      "./Greet": "./greet.jsx",
    },
    shared: [
      {
        react: { singleton: true, eager: true },
        "react-dom": { singleton: true, eager: true },
      },
    ],
  })
]

Importing Greet component in the host app

• Delcaring a remote host

plugins: [
  new ModuleFederationPlugin({
    remotes: {
      remote: `remote@http://localhost:5000/remoteEntry.js`,
    },
    shared: [
      {
        react: { singleton: true, eager: true },
        "react-dom": { singleton: true, eager: true },
      },
    ],
  })
]

• Importing from the remote host

const Greet = lazy(() => import("remote/Greet"));

Troubleshooting

https://webpack.js.org/concepts/module-federation/#troubleshooting

Read more

https://webpack.js.org/concepts/module-federation/

Availability

Available with webpack 5. Invented by https://github.com/ScriptedAlchemy