Hackforge Academy

Explanation

Shared dependencies are libraries that multiple Micro Frontends use. Instead of loading separate copies, Module Federation can share libraries such as React and React DOM between the Host and Remote applications.

Code:

Host App
   │
   ├── React
   └── React DOM

Remote App
   │
   ├── React ──→ Shared
   └── React DOM ──→ Shared

Explanation

Sharing dependencies can reduce duplicated JavaScript, improve application performance, and help ensure that the Host and Remote use compatible versions of important libraries.

Code:

Without Sharing:
Host → React
Remote → React

With Sharing:
Host ──┐
       ├── Shared React
Remote ─┘

Explanation

The singleton option ensures that only one instance of a dependency is used across the federated application. This is especially important for React because multiple React instances can cause problems with shared state and hooks.

Code:

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

Explanation

Module Federation can define required versions for shared dependencies. This helps prevent incompatible versions from being used between the Host and Remote applications.

Code:

shared: {
  react: {
    singleton: true,
    requiredVersion: '^18.0.0'
  }
}

Explanation

In a Micro Frontend architecture, commonly used libraries can be shared while each Remote continues to manage its own business-specific dependencies.

Code:

                  Host
                   │
        ┌──────────┴──────────┐
        ↓                     ↓
   Product Remote         Cart Remote
        │                     │
        └──────────┬──────────┘
                   ↓
          Shared Dependencies
          ├── React
          └── React DOM