Hackforge Academy

Explanation

Micro Frontends can share reusable UI components such as buttons, forms, modals, and navigation elements. This helps maintain a consistent user experience across independently developed applications.

Code:

Shared UI Library
├── Button
├── Input
├── Modal
└── Card

Product App → Button
Cart App    → Button
Payment App → Button

Explanation

With Module Federation, one Remote application can expose a component so that other Micro Frontends can consume it without duplicating the component's source code.

Code:

exposes: {
  './Button': './src/components/Button.jsx'
}

Explanation

A Host or another Remote can import the exposed component and use it like a normal React component.

Code:

import Button from 'uiApp/Button';

function Product() {
  return <Button>Buy Now</Button>;
}

Explanation

Common libraries such as React and React DOM can be shared between Micro Frontends to avoid loading multiple copies and to maintain compatibility.

Code:

shared: {
  react: { singleton: true },
  'react-dom': { singleton: true }
}

Explanation

A scalable Micro Frontend architecture can use a dedicated UI library or Remote to provide common components while individual Micro Frontends continue to own their business-specific components.

Code:

                    Host
                      │
          ┌───────────┼───────────┐
          ↓           ↓           ↓
      Product       Cart       Payment
          │           │           │
          └───────────┼───────────┘
                      ↓
               Shared UI Library
               ├── Button
               ├── Input
               └── Modal