@angular-architects/native-federation 20.1.5 → 20.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +3 -95
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -387,103 +387,11 @@ This option was introduced with version 19.0.14.
387
387
 
388
388
  #### Shell reloading when MFE finishes building for local development
389
389
 
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.
391
391
 
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:
393
393
 
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/)**
487
395
 
488
396
  ## FAQ
489
397
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@angular-architects/native-federation",
3
- "version": "20.1.5",
3
+ "version": "20.1.6",
4
4
  "main": "src/index.js",
5
5
  "generators": "./collection.json",
6
6
  "builders": "./builders.json",
@@ -20,8 +20,8 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@babel/core": "^7.19.0",
23
- "@softarc/native-federation": "3.3.4",
24
- "@softarc/native-federation-runtime": "3.3.4",
23
+ "@softarc/native-federation": "3.3.5",
24
+ "@softarc/native-federation-runtime": "3.3.5",
25
25
  "@chialab/esbuild-plugin-commonjs": "^0.18.0",
26
26
  "esbuild": "^0.25.1",
27
27
  "mrmime": "^1.0.1",