Hackforge Academy

Explanation

Module Federation is a technology that allows one JavaScript application to dynamically load modules or components from another application at runtime. It is commonly used to implement Micro Frontends.

Code:

Host Application
      ↓
Load Remote Module
      ↓
Product Micro Frontend

Explanation

In Module Federation, the Host is the application that consumes modules, while the Remote is the application that exposes modules for other applications to use.

Code:

Host App
   │
   └── consumes → Product App

Product App
   └── exposes → ProductComponent

Explanation

A Remote application can expose a React component so that another application can consume it without copying the component's source code.

Code:

exposes: {
  './Product': './src/Product.jsx'
}

Explanation

The Host application can import a component exposed by the Remote and render it as if it were part of the Host application.

Code:

import Product from 'productApp/Product';

function App() {
  return <Product />;
}

Explanation

Module Federation enables independently built applications to share components and modules at runtime, making it useful for large Micro Frontend architectures.

Code:

                 Host Application
                        │
          ┌─────────────┼─────────────┐
          ↓             ↓             ↓
    Product Remote   Cart Remote   Payment Remote
          │             │             │
          └─────────────┼─────────────┘
                        ↓
                 Shared Modules