Isolated Deployments

Micro Frontends Architecture and Federation

Deployment and Shared Dependencies

Isolated Deployments

Isolated deployments in micro frontends refer to the ability to deploy each frontend module independently while maintaining a cohesive user experience. This approach decouples development and release cycles, enabling teams to iterate on specific features without blocking others. However, it requires careful orchestration to ensure seamless integration, consistent styling, and shared dependency management.

---

## Strategy 1: Independent CI/CD Pipelines

Each micro frontend should have its own CI/CD pipeline to enable autonomous deployment. This allows teams to push updates without coordinating with other modules.

Example:

# GitHub Actions workflow for a micro frontend
name: Deploy Micro Frontend
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Build
        run: npm install && npm run build
      - name: Deploy to CDN
        run: ./deploy.sh

Key considerations:
- Use a shared deployment infrastructure (e.g., CDN, container registry) to host artifacts.
- Automate versioning and tagging to align with semantic versioning.

---

## Strategy 2: Versioned Shared Dependencies

Shared libraries (e.g., UI components, utilities) must be versioned and distributed via a centralized registry to avoid conflicts.

Example:

# yarn workspace configuration for shared dependencies
# packages/
#   - shared-ui
#   - microfrontend-a
#   - microfrontend-b

Tools:
- Yarn Workspaces or Lerna for monorepo management.
- npm/yarn registry or private npm registry for versioned shared packages.

Diagram:

[Micro Frontend A] --(npm install)--> [Shared UI Library v1.2.0]  
[Micro Frontend B] --(npm install)--> [Shared UI Library v1.2.0]  

---

## Strategy 3: Encapsulated Loaders and Iframes

Use encapsulation techniques (e.g., iframes, Web Components) to isolate micro frontends while maintaining a unified UI.

Example:

// Dynamic loading of a micro frontend using iframe
const iframe = document.createElement('iframe');
iframe.src = 'https://cdn.example.com/microfrontend-a/latest/index.html';
iframe.style.width = '100%';
iframe.style.height = '100vh';
document.body.appendChild(iframe);

Trade-offs:
- Iframes may introduce latency and security overhead (e.g., CORS, XSS risks).
- Web Components provide better encapsulation but require framework-specific integration.

---

## Strategy 4: Unified State and Styling

Maintain a consistent user experience by centralizing state management and styling.

Example:

// Global state management with Redux
const store = createStore(rootReducer, applyMiddleware(thunk));
// Shared styling via CSS variables
:root {
  --primary-color: #007bff;
  --font-family: 'Segoe UI', sans-serif;
}

Tools:
- Redux Toolkit or Context API for state synchronization.
- CSS-in-JS (e.g., styled-components) or CSS variables for theme consistency.

---

## Key takeaways

• Independent pipelines enable autonomous deployments without blocking other modules.
• Versioned shared dependencies prevent conflicts and ensure compatibility.
• Encapsulation (iframes/Web Components) isolates micro frontends while maintaining UI cohesion.
• Unified state and styling ensure a consistent experience across all modules.
• Always balance isolation with integration to avoid fragmentation and security risks.