Hackforge Academy

Explanation

An API Gateway can act as a single entry point between Micro Frontends and backend services. It can route requests to the appropriate backend service while the frontend applications remain focused on the user interface.

Code:

React Micro Frontends
        │
        ↓
   API Gateway
        │
   ┌────┼────┐
   ↓    ↓    ↓
Product Cart Payment
Service Service Service

Explanation

The API Gateway can route requests based on URL paths. For example, product requests can go to the Product Service while payment requests go to the Payment Service.

Code:

GET /api/products
        ↓
   API Gateway
        ↓
 Product Service

POST /api/payments
        ↓
   API Gateway
        ↓
 Payment Service

Explanation

A Micro Frontend can call the API Gateway instead of directly communicating with individual backend services. This provides a consistent backend entry point.

Code:

fetch('/api/products')
  .then(response => response.json())
  .then(data => console.log(data));

Explanation

The API Gateway can validate authentication information such as access tokens before forwarding requests to backend services.

Code:

Request
   ↓
API Gateway
   ↓
Validate Token
   ↓
Backend Service
   ↓
Response

Explanation

Combining Micro Frontends with an API Gateway creates a clear separation between frontend applications and backend services. The frontend handles UI responsibilities while the gateway manages backend routing and common concerns.

Code:

                    Browser
                       │
              ┌────────┴────────┐
              ↓                 ↓
        React Host        Micro Frontends
              │                 │
              └────────┬────────┘
                       ↓
                  API Gateway
                       │
          ┌────────────┼────────────┐
          ↓            ↓            ↓
    Product API    Cart API    Payment API