Skip to content

docs: simplify shell reloading documentation and redirect to article #912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 3 additions & 95 deletions libs/native-federation/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -387,103 +387,11 @@ This option was introduced with version 19.0.14.

#### Shell reloading when MFE finishes building for local development

During development, you might want your shell application to automatically reload when a remote Micro Frontend finishes rebuilding. This is especially useful when you're developing multiple applications simultaneously and want to see changes immediately without manual refresh.
Native Federation provides automatic shell reloading when remote Micro Frontends finish rebuilding during development. This feature eliminates manual page refreshes and significantly improves the development experience when working with multiple applications simultaneously.

Native Federation provides a **build notifications system** that enables automatic page reloads when federation artifacts are rebuilt.
For complete implementation details, configuration options, please refer to the article:

##### Configuration

**1. Enable build notifications in the remote MFE**

In your remote's `angular.json`, add the `buildNotifications` configuration:

```json
{
"projects": {
"mfe1": {
"architect": {
"build": {
"builder": "@angular-architects/native-federation:build",
"options": {
"target": "mfe1:esbuild:development",
"rebuildDelay": 0,
"dev": true,
"buildNotifications": {
"enable": true
}
}
}
}
}
}
}
```

**2. Add the watcher to your shell application**

Import and call `watchFederationBuildCompletion` in your shell's `main.ts`:

```typescript
import {
watchFederationBuildCompletion,
BUILD_NOTIFICATIONS_ENDPOINT,
} from '@angular-architects/native-federation';

// Shell watching MFE1 (running on port 4201)
if (!environment.production) {
watchFederationBuildCompletion(
`http://localhost:4201${BUILD_NOTIFICATIONS_ENDPOINT}`
);
}

bootstrapApplication(AppComponent, appConfig);
```

##### Multiple MFEs

If your shell watches multiple MFEs, you can call the function multiple times:

```typescript
if (!environment.production) {
// Watch MFE1 on port 4201
watchFederationBuildCompletion(
`http://localhost:4201${BUILD_NOTIFICATIONS_ENDPOINT}`
);

// Watch MFE2 on port 4202
watchFederationBuildCompletion(
`http://localhost:4202${BUILD_NOTIFICATIONS_ENDPOINT}`
);
}
```

##### Requirements

- Only works in development mode (`dev: true`)
- Requires `buildNotifications.enable: true` in the target MFE's configuration
- MFEs must be running with the native-federation dev server
- Should never be enabled in production builds

##### Custom Endpoints

You can customize the notification endpoint if needed:

```json
{
"buildNotifications": {
"enable": true,
"endpoint": "/my-custom-build-events"
}
}
```

Then use it in your shell's watcher:

```typescript
watchFederationBuildCompletion('http://localhost:4201/my-custom-build-events');
```

This feature significantly improves the development experience by eliminating manual page refreshes and ensuring your shell always reflects the latest changes from your remote micro frontends.
**📖 [Fixing DX Friction: Automatic Shell Reloading in Native Federation](https://www.angulararchitects.io/en/blog/fixing-dx-friction-automatic-shell-reloading-in-native-federation/)**

## FAQ

Expand Down
Loading