Implement Micro Front End Using Module Federation Approach

 Module Federation is an approach that can be used to implement micro frontends. It is a feature of Webpack, a popular module bundler for JavaScript applications. Module Federation allows multiple applications to share and dynamically load code from each other at runtime. This enables the creation of loosely coupled micro frontends that can be developed and deployed independently.

Benefits of Module Federation for Micro Frontends:

• Independent Development and Deployment: Micro frontends can be developed and deployed independently, allowing different teams to work autonomously on their respective features.

• Technology Agnosticism: Each micro frontend can use its preferred technology stack, enabling teams to choose the most suitable tools and frameworks for their specific needs.

• Scalability and Performance: Module Federation supports dynamic loading, allowing micro frontends to be loaded on-demand, resulting in improved performance and scalability.

• Code Sharing and Size Reduction: Dependencies can be shared across micro frontends, reducing duplication and optimizing the overall bundle size.

• Incremental Modernization: Module Federation enables the gradual modernization of legacy systems by introducing new micro frontends without the need for a complete rewrite.

Let's consider an example in React, where we have two micro frontends, "Product" and "Cart," which are part of an e-commerce application. 

The "Product" micro frontend is responsible for displaying product information, while the "Cart" micro frontend handles the shopping cart functionality.

Here's how the Module Federation approach can be applied to implement these micro frontends:

1. Project Setup:  open the console and run the below command for project setup and give the appropriate project name(like in our example Product and Cart)

•  npx create-mf-app 

2. Configuring the "Product" Micro Frontend:

In the webpack configuration of the "Product" micro frontend, we specify what parts of the application should be exposed for sharing. For example, we might expose a component called "ProductCard" and its associated styles:

3. Configuring the "Cart" Micro Frontend:

Similarly, in the webpack configuration of the "Cart" micro frontend, we define what parts of the application should be exposed. In this case, we might expose a component called "CartIcon" and its associated styles:

4. Configuring the Remote setup to get the remote component to our project 

For Example, we want to use Product Card Component in our Cart Micro front-end.

so go to the Cart micro front project, in that webpack.config.js file

add the below code.

   remotes: {

//projectname:"projectname@http://localhost:port/remoteEntry.js"

      as per our example

        product: "product@http://localhost:3000/remoteEntry.js",

      },

and Import component.

import ProductCard from 'product/ProductCard'

Example : 

Summary : 

In this example, the ProductCard component is imported from the "Product" micro frontend using the product library name defined in the webpack configuration. 

When the shell application is built and executed, it dynamically loads the required micro frontend code at runtime. The "ProductCard" component from the "Product" micro frontend 

This way, the Module Federation approach allows for the independent development and deployment of micro frontends while enabling them to be dynamically loaded and integrated into an orchestrating shell application.

Conclusion:

Module Federation provides a powerful approach for implementing micro frontends by enabling dynamic code sharing, independent development, and seamless integration. 

By leveraging this approach, teams can develop scalable, modular, and maintainable applications that can adapt to changing requirements and technologies.