MicroFrontend with Module Federation (Full Configuration)

This content originally appeared on DEV Community and was authored by Sabareeswaran Chandrasekar

MicroFrontend:

An architectural style where a frontend application is split into smaller, semi-independent “micro-apps“, each built, tested, and deployed by independent teams. It’s the frontend version of microservices.

Build Time Integration:

It to the approach where microfrontends are integrated into the main application at the time of compilation, typically using npm packages, monorepos, or direct imports. All microfrontends are bundled together during the build process before deployment.

Run Time Integration:

It means the main application loads microfrontends on the fly, usually from a remote URL, after the application starts in the browser.

The concept of Module Federation occurs here only.

Module Federation:

It is a feature introduced in Webpack 5 that allows multiple applications to share and load code from each other at runtime—without bundling all the code together during the build.

It is the core technology behind Runtime Integration in Microfrontends.

Configuration:

Create the host and remote apps.

Check here for how to create the apps:

https://dev.to/sabareeswaran_chandraseka/create-a-reactjs-webpack-project-manually-without-create-react-app-59p1

In Remote App,

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // other config...
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './LoginForm': './src/components/LoginForm',
      },
      shared: ['react', 'react-dom'],
    });
  ],
};

In Host App,

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;


module.exports = {
  // other config...
  plugins: [
    new ModuleFederationPlugin({
     remotes: {
      remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
     },
     shared: ['react', 'react-dom'],
    });
 ],
};

Use it anywhere like:

const LoginForm = React.lazy(() => import('remoteApp/LoginForm'));

<Suspense fallback={<div>Loading...</div>}>
  <LoginForm />
</Suspense>

That’s it.

This content originally appeared on DEV Community and was authored by Sabareeswaran Chandrasekar