Fixing DX Friction: Automatic Shell Reloading in Native Federation

Developing micro frontend architectures brings tremendous benefits for team autonomy and scalability, but it also introduces unique challenges in the development workflow. One of the most requested features was automatically reloading the shell application when a remote has been changed during development. Native Federation 20.0.7 addresses this challenge with automatic reload through Server-Sent Events (SSE).

The Developer Experience Challenge

In traditional single-page applications, reload is taken for granted. You save a file, the development server rebuilds, and your browser automatically reflects the changes. However, in micro frontend architectures, this seamless experience breaks down at the boundaries between applications. When you modify code in the Microfrontend:

1. The micro frontend rebuilds - Angular's dev server detects changes and rebuilds the federation artifacts
2. The shell remains unaware - The shell application has no knowledge that the remote micro frontend has been updated
3. Manual intervention required - Developers must manually refresh the shell browser to see their changes

This workflow interruption happens frequently during active development, creating significant friction and reducing productivity.

The Solution: Build Notifications via SSE

Native Federation 20.0.7 introduces a notification system that bridges the gap between independent micro frontend builds and shell application awareness. The solution leverages Server-Sent Events (SSE) to create a real-time communication channel between micro frontends and their consuming shells.

Architecture Overview

The notification system consists of three key components working together:

1. Build Notification Server

Each micro frontend in development mode initializes an SSE endpoint alongside its federation artifacts. This lightweight server:

• Detects when federation builds complete successfully or fail
• Broadcasts standardized events to connected clients
• Manages connection lifecycle and cleanup
• Operates only during local development

2. Federation Metadata

The system extends the standard remoteEntry.json with build notification metadata:

{
  "name": "booking-mf",
  "shared": {...},
  "exposes": {...},
  "buildNotificationsEndpoint": "http://localhost:4201/federation-events"
}

This endpoint URL is automatically generated and exposed, making it discoverable by shell applications without manual configuration.

3. Client-Side Event Listeners

Shell applications automatically detect and connect to available notification endpoints during the federation initialization process. When build events are received, the shell can then refresh the page.

Implementation Details

Micro Frontend Configuration

Build notifications work out of the box without any configuration. However, you can customize the behavior if needed:

// In your federation.config.js (optional configuration)
export default {
  name: 'booking-mf',
  exposes: {
    './BookingComponent': './src/app/booking/booking.component.ts'
  },
  buildNotifications: {
    enable: true, // This is the default value
    endpoint: '/@angular-architects/native-federation:build-notifications' // This is the default value
  }
};

Automatic Shell Integration

Shell applications automatically discover and connect to notification endpoints with no additional configuration required:

// Shell initialization (existing code remains unchanged)
import { initFederation } from '@softarc/native-federation-runtime';

initFederation({
  'booking-mf': 'http://localhost:4201/remoteEntry.json',
  'checkin-mf': 'http://localhost:4202/remoteEntry.json'
})
.then(() => import('./bootstrap'))
.catch(err => console.error(err));

Behind the scenes, the initialization process:

1. Fetches federation manifests from each configured micro frontend
2. Discovers notification endpoints from the remoteEntry.json metadata
3. Establishes SSE connections to available endpoints
4. Listens for build events and reloads the page when necessary

Manual Event Listening for Custom Logic

If you need to add extra custom logic when builds complete, you can manually listen to build events in your shell application:

// Or with custom event handling
const eventSource = new EventSource('http://localhost:4201/federation-events');

eventSource.onmessage = function (event) {
  const data = JSON.parse(event.data);

  switch(data.type) {
    case 'BUILD_COMPLETED':

      console.log('Build completed, updating specific micro frontend...');
      // Your extra custom logic
      break;
    case 'BUILD_ERROR':
      // Show custom error handling
      console.error('Build failed:', data.error);
      break;
  }
};

Summary

The introduction of automatic reload for micro frontends in Native Federation 20.0.7 eliminates a major friction point in micro frontend development workflows. By leveraging Server-Sent Events to create communication between micro frontends and shell applications, developers can maintain the productivity they expect from modern development tools while working with distributed frontend architectures.

The post Fixing DX Friction: Automatic Shell Reloading in Native Federation appeared first on ANGULARarchitects.