Skip to content

gauravbehere/webpack-module-federation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

image

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