The Developer Experience Challenge

Working with micro frontend architectures unlocks significant advantages in team independence and system growth, but it also brings unexpected complications to daily development routines. One of the most frequently requested improvements was the ability to automatically refresh the shell application whenever a remote micro frontend undergoes changes during local development. With version 20.0.7, Native Federation tackles this issue by introducing automatic reload powered by Server-Sent Events (SSE).

In conventional single-page applications, the reload behavior is something developers rarely think about. A file is saved, the dev server recompiles, and the browser instantly reflects the new state. In micro frontend setups, however, this smooth experience fractures at the boundaries between separate applications. When a change is made inside a micro frontend:

  1. The micro frontend rebuilds — Angular's development server picks up the modifications and regenerates the federation artifacts.
  2. The shell has no awareness — The shell application is never informed that the remote micro frontend has produced a fresh build.
  3. Manual refresh becomes necessary — Developers are forced to manually reload the shell's browser window to observe their changes.

During periods of intense development, this interruption occurs regularly, creating noticeable friction and dragging down overall efficiency.

The Solution: Build Notifications via SSE

Native Federation 20.0.7 bridges the gap between isolated micro frontend builds and shell application awareness with a dedicated notification mechanism. The approach relies on Server-Sent Events (SSE) to establish a real-time channel that connects micro frontends with the shells that consume them.

Architecture Overview

This notification system is built from three cooperating components:

1. Build Notification Server

Every micro frontend running in development mode starts an SSE endpoint next to its federation artifacts. This lightweight server handles several responsibilities:

  • Monitors whether federation builds complete successfully or end in failure.
  • Dispatches standardized events to every connected client.
  • Oversees connection handling, including proper cleanup when sessions end.
  • Runs exclusively during local development.

2. Federation Metadata

The standard remoteEntry.json file is extended to carry build notification metadata:

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

The endpoint URL is generated and exposed automatically, which means shell applications can discover it without any manual setup.

3. Client-Side Event Listeners

During the federation initialization process, shell applications automatically locate and connect to available notification endpoints. Once build events arrive, the shell responds by refreshing the page.

Implementation Details

Micro Frontend Configuration

Build notifications function immediately with zero configuration. That said, adjustments are possible when your setup demands them:

// 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 connect to notification endpoints automatically, requiring no explicit configuration:

// 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));

Beneath the surface, the initialization flow follows this sequence:

  1. Retrieves federation manifests for every configured micro frontend.
  2. Locates notification endpoints by examining the metadata inside remoteEntry.json.
  3. Opens SSE connections to the discovered endpoints.
  4. React to build events, reloading the page only when necessary.

Manual Event Listening for Custom Logic

For cases where additional logic must run when builds finish, the shell application can subscribe to build events manually:


// 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 automatic reload capability introduced in Native Federation 20.0.7 removes one of the most persistent obstacles in micro frontend development workflows. By using Server-Sent Events to open a line of communication between micro frontends and their shells, developers now benefit from the same seamless feedback loop they expect from modern tooling, even while operating within distributed frontend architectures.