Welcome back to our deep dive into Micro-Frontends (**link of Part 1**)!

In this part, we'll elevate our understanding of this revolutionary architecture by exploring more advanced concepts, integrating Micro Apps using Webpack, and visualising complex scenarios with detailed diagrams.

ca9a80a0-ebff-4de2-86fe-1b735627b027-01.png

Micro App Development

Let's extend our Product Listing Micro App by incorporating state management and asynchronous data fetching using Redux and Axios.

1. Enhancing ProductList.js

// ProductList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchProducts, selectProducts } from './productSlice';
import axios from 'axios';

const ProductList = () => {
  const dispatch = useDispatch();
  const products = useSelector(selectProducts);

  useEffect(() => {
    // Fetch products asynchronously
    axios.get('<https://api.example.com/products>')
      .then(response => dispatch(fetchProducts(response.data)))
      .catch(error => console.error('Error fetching products:', error));
  }, [dispatch]);

  return (
    <div>
      <h2>Product Listing</h2>
      <ul>
        {products.map((product, index) => (
          <li key={index}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

2. Introducing Redux for State Management

npm install @reduxjs/toolkit react-redux

Create a productSlice.js file:

// productSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const productSlice = createSlice({
  name: 'product',
  initialState: {
    products: [],
  },
  reducers: {
    fetchProducts: (state, action) => {
      state.products = action.payload;
    },
  },
});

export const { fetchProducts } = productSlice.actions;
export const selectProducts = state => state.product.products;

export default productSlice.reducer;

Webpack Module Federation for Micro-Frontends

Webpack's Module Federation empowers us to dynamically load and integrate Micro Apps. Let's take our Product Listing Micro App and integrate it into a Shell/Container.

1. Update Product Listing Micro App's webpack.config.js

Here is a webpack configuration file for a micro frontend application named 'Product Listing'. It uses the Module Federation plugin from webpack 5 to expose certain modules to other applications and share dependencies.

Here's a breakdown of the code:

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

This line imports the ModuleFederationPlugin from webpack's container. This plugin is used to create a federation of multiple independent applications, which can share modules with each other.

module.exports = {
  // ...existing config
  plugins: [
    new ModuleFederationPlugin({
      name: 'productListing',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/ProductList',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
        axios: { singleton: true },
        '@reduxjs/toolkit': { singleton: true },
        'react-redux': { singleton: true },
      },
    }),
  ],
};

This part exports the webpack configuration. The ModuleFederationPlugin is added to the plugins array in the configuration.