npm-mfe-live-reload

Reload Micro Frontend Remotes from Shell Application

Description

A simple script to reload a microfrontend application.

This tool is designed to work in development mode and helps automatically reload the shell application when changes are detected in remote microfrontend applications.

Features

• Supports Angular microfrontend applications.
• Uses WebSocket for live reload functionality.
• Easy integration with your shell application.

Installation

Install the package via npm:

npm install npm-mfe-live-reload

Usage

1. Add LiveReloadService to your shell app (e.g., via APP_INITIALIZER).

   import { LiveReloadService } from 'npm-mfe-live-reload';
   
   {
      provide: APP_INITIALIZER,
      useFactory: (liveReloadService: LiveReloadService) => () => {
         if (environment.env === 'local') {
         liveReloadService.initialize();
         }
         return Promise.resolve();
      },
      deps: [LiveReloadService],
      multi: true
   },
   {
      provide: LiveReloadService,
      useFactory: () => {
        if (environment.env === 'local') {
          try {
            return new LiveReloadService();
          } catch (e) {
            console.error('LiveReloadService initialization failed:', e);
          }
        }
   
        return { initialize: () => {}, connect: () => {}, disconnect: () => {} };
      }
    },

2. Start the development server:

   npx mfe-live-reload -- ../remote-app-1 ../remote-app-2

   • These paths should point to the source folders of your remotes (not ./dist).
3. When a remote changes, the shell app will auto-reload.
4. This only runs in development mode (isDevMode()).

Scripts

• build: Builds the project using tsup.

License

MIT License

Author

Stefan Zota