Skip to content

Commit 3aecbb2

Browse files
Merge pull request #912 from aramirezj/docs/updates-wrong-documentation-shell-reloading
docs: simplify shell reloading documentation and redirect to article
2 parents f9a28bf + e1d5ca9 commit 3aecbb2

File tree

1 file changed

+3
-95
lines changed

1 file changed

+3
-95
lines changed

libs/native-federation/README.md

Lines changed: 3 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -387,103 +387,11 @@ This option was introduced with version 19.0.14.
387387

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

390-
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.
390+
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.
391391

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

394-
##### Configuration
395-
396-
**1. Enable build notifications in the remote MFE**
397-
398-
In your remote's `angular.json`, add the `buildNotifications` configuration:
399-
400-
```json
401-
{
402-
"projects": {
403-
"mfe1": {
404-
"architect": {
405-
"build": {
406-
"builder": "@angular-architects/native-federation:build",
407-
"options": {
408-
"target": "mfe1:esbuild:development",
409-
"rebuildDelay": 0,
410-
"dev": true,
411-
"buildNotifications": {
412-
"enable": true
413-
}
414-
}
415-
}
416-
}
417-
}
418-
}
419-
}
420-
```
421-
422-
**2. Add the watcher to your shell application**
423-
424-
Import and call `watchFederationBuildCompletion` in your shell's `main.ts`:
425-
426-
```typescript
427-
import {
428-
watchFederationBuildCompletion,
429-
BUILD_NOTIFICATIONS_ENDPOINT,
430-
} from '@angular-architects/native-federation';
431-
432-
// Shell watching MFE1 (running on port 4201)
433-
if (!environment.production) {
434-
watchFederationBuildCompletion(
435-
`http://localhost:4201${BUILD_NOTIFICATIONS_ENDPOINT}`
436-
);
437-
}
438-
439-
bootstrapApplication(AppComponent, appConfig);
440-
```
441-
442-
##### Multiple MFEs
443-
444-
If your shell watches multiple MFEs, you can call the function multiple times:
445-
446-
```typescript
447-
if (!environment.production) {
448-
// Watch MFE1 on port 4201
449-
watchFederationBuildCompletion(
450-
`http://localhost:4201${BUILD_NOTIFICATIONS_ENDPOINT}`
451-
);
452-
453-
// Watch MFE2 on port 4202
454-
watchFederationBuildCompletion(
455-
`http://localhost:4202${BUILD_NOTIFICATIONS_ENDPOINT}`
456-
);
457-
}
458-
```
459-
460-
##### Requirements
461-
462-
- Only works in development mode (`dev: true`)
463-
- Requires `buildNotifications.enable: true` in the target MFE's configuration
464-
- MFEs must be running with the native-federation dev server
465-
- Should never be enabled in production builds
466-
467-
##### Custom Endpoints
468-
469-
You can customize the notification endpoint if needed:
470-
471-
```json
472-
{
473-
"buildNotifications": {
474-
"enable": true,
475-
"endpoint": "/my-custom-build-events"
476-
}
477-
}
478-
```
479-
480-
Then use it in your shell's watcher:
481-
482-
```typescript
483-
watchFederationBuildCompletion('http://localhost:4201/my-custom-build-events');
484-
```
485-
486-
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.
394+
**📖 [Fixing DX Friction: Automatic Shell Reloading in Native Federation](https://www.angulararchitects.io/en/blog/fixing-dx-friction-automatic-shell-reloading-in-native-federation/)**
487395

488396
## FAQ
489397

0 commit comments

Comments
 (0)