How to Run Micro Front-end Apps using Webpack Module Federation

As a means of building web applications that are more scalable and maintainable, micro front-end architecture has become increasingly popular. Webpack Module Federation makes it easy to share code and communicate between applications, so it’s great for building micro front-end apps. The purpose of this article is to explore how Webpack Module Federation can be used to run micro front-end applications.

Prerequisites

Here’s what you need on your machine before getting started:

• Node.js and npm
• Webpack 5
• Webpack Module Federation plugin

Creating Your Micro Front-End Apps

The first step in building micro front-end apps is to create a new project for each app. You can use any front-end framework you prefer, such as React, Vue, or Angular. Here, we will use React as an example.

1. Create a new React project:

npx create-react-app my-app

2. Install the Webpack Module Federation plugin:

npm install --save-dev webpack webpack-cli webpack-dev-server

3. Configure the Webpack Module Federation plugin in your React project by creating a webpack.config.js file in the root directory of your project with the following code:

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

module.exports = {
  mode: 'development',
  devServer: {
    port: 3001,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote_app',
      filename: 'remoteEntry.js',
      exposes: {},
      remotes: {
        'my_app': 'my_app@http://localhost:3000/remoteEntry.js',
      },
      shared: {
        react: {
          singleton: true,
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
};

In this configuration file, we are specifying that we want to expose the Button component in our application and share the react and react-dom libraries with other applications.

4. Start your React application:

npm start

5. Repeat steps 1–4 for each micro front-end app you want to create.

Running Your Micro Front-End Apps

With your micro front-end apps created, you can now run them using Webpack Module Federation.

1. Start each application individually:

cd my-app
npm start
cd ../my-other-app
npm start

Make sure that each application is running on a different port.

2. In your main application, import the remote component from the other application:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'my_other_app/Button';
function App() {
  return (
    <div>
      <Button />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

In this example, we are importing the Button component from the my_other_app application and rendering it in our main application.

3. Run your main application:

cd my-main-app
npm start

With your main application running, you should be able to see the Button component from the other application rendered on the page.

Conclusion

This article explored how to use Webpack Module Federation to run micro front-end apps. By following these steps, you can easily share code and communicate between applications, making it easier to build scalable and maintainable micro front-end apps.