Creating Micro Frontends with API Gateways

Creating micro frontends with API gateways is an approach that allows you to break up your frontend application into smaller, independently deployable pieces (micro frontends) while managing API calls and data through an API gateway. This approach helps in scaling the frontend application, improving team collaboration, and maintaining the overall architecture of the application more effectively.

Here’s how to implement micro frontends with API gateways step-by-step.

1. What are Micro Frontends?

Micro frontends break a large frontend application into smaller, more manageable units, each responsible for a distinct part of the UI. Each micro frontend can be developed, deployed, and updated independently, much like microservices on the backend. The main benefits include better maintainability, independent scaling, and team autonomy.

2. API Gateway Overview

An API Gateway acts as a reverse proxy that routes requests from clients to the appropriate micro frontend. It is the entry point for all client requests, handling the orchestration of micro frontends by managing API calls, aggregating responses, and providing a unified interface to the frontend application.

3. Why Use API Gateways with Micro Frontends?

Simplified Routing: API Gateways can manage the routing of API calls, ensuring the correct micro frontend receives the necessary data.
Centralized Security: Authentication, authorization, and rate limiting can be handled centrally at the API Gateway level, making security more consistent and manageable.
Flexible Composition: Micro frontends can be composed dynamically based on user roles, device types, or other factors.
Separation of Concerns: Micro frontends can be developed and deployed independently, reducing interdependencies and simplifying the release process.

4. How to Create Micro Frontends with API Gateways

Step 1: Breaking Down the Frontend into Micro Frontends

Identify Independent Features or Modules: Start by identifying parts of your application that can be split into independent features or modules. For example:
- Authentication module: Handles login/logout.
- Dashboard module: Displays user-specific data.
- Product module: Manages product-related UI and functionality.
Develop Micro Frontends Independently: Each module should have its own independent build pipeline and deployment process. They should be self-contained and capable of being independently deployed.

Step 2: Set Up an API Gateway

An API Gateway sits between the client (React app) and the various micro frontends, routing the requests to the appropriate service. It can also aggregate responses from multiple micro frontends.

Choose an API Gateway: Popular API Gateway solutions include:
- Kong: Open-source API Gateway for managing microservices.
- AWS API Gateway: Managed solution for routing API requests to services.
- Express Gateway: Node.js-based API Gateway.
- Nginx: Can be used as an API Gateway with reverse proxy configurations.
Define Routes and Endpoints: The API Gateway will map incoming requests to the appropriate micro frontend, and you can aggregate API responses where necessary.

Example of a simple Express API Gateway setup:

const express = require('express');
const app = express();
const axios = require('axios');

// Route to proxy requests to the User Micro Frontend
app.get('/user', async (req, res) => {
  try {
    const response = await axios.get('http://user-microfrontend-service/users');
    res.json(response.data);
  } catch (error) {
    res.status(500).send('Error fetching user data');
  }
});

// Route to proxy requests to the Product Micro Frontend
app.get('/products', async (req, res) => {
  try {
    const response = await axios.get('http://product-microfrontend-service/products');
    res.json(response.data);
  } catch (error) {
    res.status(500).send('Error fetching product data');
  }
});

app.listen(3000, () => {
  console.log('API Gateway running on http://localhost:3000');
});

In this setup:

The API Gateway forwards requests to different micro frontends.
The user-microfrontend-service handles requests related to user data.
The product-microfrontend-service handles product-related requests.

Step 3: Integrate Micro Frontends into React

Now, integrate each micro frontend into the React application. Micro frontends are typically injected dynamically based on the routes or user interactions. There are multiple ways to integrate them, including using Web Components, iFrames, or JavaScript bundles.

3.1. Using Web Components for Integration

Web Components provide a way to encapsulate and expose micro frontends in a reusable format. Each micro frontend can be a Web Component that the main application can use.

Create a Web Component for Each Micro Frontend:
- Use React or Vue to build micro frontends and then wrap them as Web Components using libraries like react-to-webcomponent or vue-custom-element.
- Alternatively, you can build raw Web Components using the native Web Components API.
Load Micro Frontends Dynamically: In your main React app, you can load each micro frontend dynamically based on routing, user authentication, or other factors.

Example using Web Components:

// src/App.js (React)
import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Main App</h1>
      <user-dashboard></user-dashboard> {/* User Micro Frontend Web Component */}
      <product-dashboard></product-dashboard> {/* Product Micro Frontend Web Component */}
    </div>
  );
};

export default App;

In the example above:

<user-dashboard> and <product-dashboard> are Web Components that encapsulate the functionality of their respective micro frontends.

3.2. Using iFrames for Micro Frontend Isolation

If you prefer complete isolation between micro frontends, you can use iFrames. Each micro frontend is hosted separately and embedded as an iFrame.

const ProductIframe = () => {
  return (
    <iframe
      src="https://product-service.example.com"
      title="Product Micro Frontend"
      width="100%"
      height="500px"
    />
  );
};

iFrames offer strong isolation and are ideal if your micro frontends are built using different frameworks or need full sandboxing.

Step 4: Handle Routing

In a micro frontend architecture, routing needs to be handled both at the API Gateway and in the individual micro frontends.

Routing at the API Gateway: The API Gateway can route requests to different services, as shown in the example above.
Routing in the React Application: Use React Router to navigate between micro frontends in the React app.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React from 'react';
import UserDashboard from './UserDashboard';
import ProductDashboard from './ProductDashboard';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/user" component={UserDashboard} />
        <Route path="/products" component={ProductDashboard} />
      </Switch>
    </Router>
  );
};

export default App;

Each route can render a different micro frontend based on the path.

5. Managing State Across Micro Frontends

State management can be tricky when dealing with micro frontends. You need to decide whether to:

Use a global state manager like Redux, Context API, or even a custom event system.
Communicate between micro frontends via events or APIs.

If the micro frontends are completely independent, consider using custom events or local storage to share state.

Example using events:

// In User Micro Frontend
const sendEvent = () => {
  window.dispatchEvent(new CustomEvent('userDataChanged', { detail: { userName: 'John Doe' } }));
};

// In another Micro Frontend
window.addEventListener('userDataChanged', (event) => {
  console.log(event.detail.userName); // 'John Doe'
});

6. CI/CD for Micro Frontends

Each micro frontend should have its own CI/CD pipeline. You can use tools like Docker, Kubernetes, or serverless platforms to deploy each micro frontend independently.

An API Gateway can aggregate responses and orchestrate deployments by allowing each micro frontend to be deployed separately and managed in isolation.