How do I set up Module Federation in my React application?

How do I set up Module Federation in my React application?

To set up Module Federation, you'll need to configure your Webpack settings. Start by adding the ModuleFederationPlugin.

What are the key configurations I need to include?

You'll need to specify the name, filename, and remotes in the ModuleFederationPlugin. Also, define shared dependencies.

Can you give me an example of the Webpack configuration?

Sure! Here's a basic example:

new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  remotes: {
    app2: 'app2@http://localhost:3002/remoteEntry.js',
  },
  shared: { react: { singleton: true }, },
});

What about the host application?

In the host application, you'll also use ModuleFederationPlugin to load the remote modules. Make sure to configure it properly.