How do i enable Live Reload If I am registering Remotes in Runtime?

[shashank-vritti]

Question: How to Enable Live Reload with Runtime Remote Registration in Module Federation?

Context

I'm building a microfrontend architecture using Module Federation with runtime remote registration (not static). I need live reload to work when remote applications change during development.

Current Setup

Host Application (web-nexus)

• Framework: React 19 + Rsbuild
• Port: 3002
• Role: Container app that dynamically loads microfrontends at runtime

// Current rsbuild.config.ts
pluginModuleFederation({
  name: 'vritti_web_nexus',
  remotes: {}, // Empty - we load remotes dynamically at runtime
  shared: SHARED_DEPENDENCIES,
})

Remote Microfrontends

auth-microfrontend (port 3001):

pluginModuleFederation({
  name: 'vritti_auth',
  exposes: {
    './routes': './src/routes.tsx',
  },
  shared: SHARED_DEPENDENCIES,
  manifest: true,
})

cloud-microfrontend (port 3003):

pluginModuleFederation({
  name: 'vritti_cloud',
  exposes: {
    './routes': './src/routes.tsx',
  },
  shared: SHARED_DEPENDENCIES,
  manifest: true,
})

Runtime Loading Pattern

// web-nexus/src/utils/remote-loader.ts
import { init, loadRemote } from '@module-federation/enhanced/runtime';

const protocol = window.location.protocol;
const domain = 'local.vrittiai.com';

export const ALL_REMOTES = [
  {
    name: 'vritti_auth',
    entry: `${protocol}//${domain}:3001/mf-manifest.json`,
  },
  {
    name: 'vritti_cloud',
    entry: `${protocol}//${domain}:3003/mf-manifest.json`,
  },
];

// Initialize with no static remotes
init({
  name: 'vritti_web_nexus',
  remotes: [],
});

// Load dynamically at runtime
export async function loadRemoteModule<T = any>(
  remoteName: string,
  modulePath: string,
): Promise<T | null> {
  try {
    const remote = ALL_REMOTES.find((r) => r.name === remoteName);
    if (!remote) return null;

    const module = await loadRemote<T>(`${remoteName}/${modulePath}`, {
      from: 'runtime',
      remoteInfo: {
        name: remote.name,
        entry: remote.entry,
      },
    });

    return module;
  } catch (error) {
    console.error(`Failed to load ${remoteName}/${modulePath}:`, error);
    return null;
  }
}

The Problem

When I change code in a remote application (e.g., auth-microfrontend), the host application (web-nexus) does not automatically reload.

• The remote's dev server rebuilds successfully
• The remote's manifest file (mf-manifest.json) updates
• But the host continues showing old code until I manually refresh

Why I Need Runtime Registration (Not Static)

I specifically don't want to register remotes statically like this:

// ❌ I DON'T want this approach
pluginModuleFederation({
  name: 'vritti_web_nexus',
  remotes: {
    vritti_auth: 'vritti_auth@http://local.vrittiai.com:3001/mf-manifest.json',
    vritti_cloud: 'vritti_cloud@http://local.vrittiai.com:3003/mf-manifest.json',
  },
})

Reasons:

1. Need to load remotes conditionally based on auth state
2. Remotes should be able to start in any order (host-first or remote-first)
3. Want loose coupling - host shouldn't hardcode all remote URLs
4. Better scalability as we add more microfrontends
5. Host should gracefully handle missing/offline remotes

What I've Tried

1. Enabling manifest in remotes ✅

   • Both remotes have manifest: true
   • Manifests are generated successfully

2. Writing to disk during dev ✅

   dev: {
     writeToDisk: true,
   }

3. Module Federation Enhanced runtime API ✅

   • Using @module-federation/enhanced/runtime
   • init() and loadRemote() work correctly

The Question

How can I enable live reload in the host application when remote microfrontends change, while keeping runtime remote registration?

Specifically:

• When auth-microfrontend code changes → web-nexus should reload/hot-reload
• When cloud-microfrontend code changes → web-nexus should reload/hot-reload
• Without hardcoding remotes in the host's Module Federation config
• Without requiring all remotes to be running before starting the host

Environment Details

• Build Tool: Rsbuild 1.x
• MF Plugin: @module-federation/rsbuild-plugin + @module-federation/enhanced
• Dev Server: Rsbuild dev server with HMR enabled
• Framework: React 19
• Node: v20+
• Package Manager: pnpm

Expected Behavior

# Terminal 1: Start remote
cd auth-microfrontend
pnpm dev  # Running on port 3001

# Terminal 2: Start host
cd web-nexus
pnpm dev  # Running on port 3002, loads auth remote at runtime ✅

# Terminal 1: Make a change in auth-microfrontend
# Edit src/pages/LoginPage.tsx

# Expected: web-nexus automatically reloads ❌ Currently doesn't happen

Current Behavior

• Remote rebuilds successfully
• Remote's HMR works (changes reflect in standalone remote)
• Host continues showing old code until manual refresh (Cmd+R)

Possible Approaches?

I'm not sure which approach is best:

• Polling manifest files for changes?
• WebSocket communication between remotes and host?
• Custom Rsbuild plugin to watch remote manifests?
• Some configuration I'm missing in Module Federation Enhanced?

Any guidance or examples would be greatly appreciated!

[shashank-vritti]

@ScriptedAlchemy Can you please comment on this?

[ScriptedAlchemy]

Can't you just override the hard coded remote urls at runtime with runtime plugin so system can statically analyze it?
Have you tried with MF chrome dev tools installed? Might be related to the unload remote pr

[shashank-vritti]

Hi @ScriptedAlchemy, thanks for the quick response!

My Current Setup

I'm building a multi-tenant SaaS platform using Rsbuild 1.7.2 with @module-federation/rsbuild-plugin. The architecture loads microfrontends dynamically based on user permissions and tenant configuration.

Current Code Structure

Host App (web-nexus):

// rsbuild.config.ts - Static remotes (only for dev HMR)
const devRemotes = isDev ? {
  VrittiAuth: 'vritti_auth@http://localhost:3001/mf-manifest.json',
  VrittiCloud: 'vritti_cloud@http://localhost:3012/mf-manifest.json'
} : {};

pluginModuleFederation({
  name: 'vritti_nexus_host',
  remotes: devRemotes,  // ❌ Want to remove this
  shared: { react, 'react-dom', ... }
})

// bootstrap.tsx - Runtime registration
import { registerRemotes } from '@module-federation/enhanced/runtime';
import { ALL_REMOTES } from './config/remotes.config';

// Register remotes before React renders
registerRemotes(
  ALL_REMOTES.map((remote) => ({
    name: remote.name,
    entry: remote.entry,  // URLs built from env vars
  }))
);

// RemoteRoutes.tsx - Dynamic loading component
export const RemoteRoutes = ({ remoteName, moduleName, dataKey }) => {
  const [routes, setRoutes] = useState(null);

  useEffect(() => {
    loadRemote(`${remoteName}/${moduleName}`)
      .then((module) => {
        const data = dataKey ? module[dataKey] : module;
        setRoutes(data);
      });
  }, [remoteName, moduleName]);

  return routes ? <>{useRoutes(routes)}</> : <Skeleton />;
};

// Usage in router
<RemoteRoutes
  remoteName="VrittiAuth"
  moduleName="routes"
  dataKey="authRoutes"
/>

Why Runtime Registration?

Current: Remotes are configured via environment variables
Future (Phase 2): Remotes will be loaded from our database based on:

• Tenant subscription (which features they've purchased)
• User permissions (which modules they can access)
• Feature flags (gradual rollout of new microfrontends)

Example:

// Production: Fetch remotes from API
const tenantModules = await fetch('/api/tenant/modules');
// Returns: [
//   { name: 'Analytics', url: 'https://mf.vrittiai.com/analytics/mf-manifest.json' },
//   { name: 'Reports', url: 'https://mf.vrittiai.com/reports/mf-manifest.json' },
// ]

// Development: Override with localhost URLs
const remotes = tenantModules.map(remote => ({
  name: remote.name,
  entry: isDev
    ? `http://localhost:${DEV_PORT_MAP[remote.name]}/mf-manifest.json`
    : remote.url  // Production URL from database
}));

registerRemotes(remotes);

This means we cannot know the remotes at build time - they're truly dynamic. The database stores production CDN URLs, and in development we transform them to localhost ports.

The Problem

When I remove the static remotes: devRemotes from rsbuild config, HMR stops working because the dev server doesn't know which remotes to watch for changes.

But I can't use static config for this architecture - the remotes are discovered at runtime!

My Question

Is it technically possible for the dev server to start watching a remote when loadRemote() is called during development?

The ideal flow would be:

1. Dev mode: Host starts without knowing any remotes
2. User navigates to a route that needs a remote
3. RemoteRoutes component calls loadRemote('VrittiAuth/routes')
4. Runtime detects dev mode and notifies the dev server: "Start watching this remote"
5. Dev server establishes WebSocket connection to http://localhost:3001
6. Future changes to auth-microfrontend trigger HMR in the host

Conceptual API:

// In development mode, loadRemote could trigger HMR registration
if (process.env.NODE_ENV === 'development') {
  window.__DEV_SERVER__?.watchRemote?.({
    name: 'VrittiAuth',
    entry: 'http://localhost:3001/mf-manifest.json'
  });
}

Alternative Ideas

1. Dev-only plugin that reads a config file and watches those remotes (but defeats the purpose of runtime discovery)
2. Polling manifest endpoints from the browser and forcing reload (loses granular HMR, adds overhead)
3. Accept full page reloads in dev mode for runtime remotes (poor DX)

Current Workaround

I'm using a hybrid approach:

• Development: Static config with hardcoded localhost URLs → HMR works
• Production: Pure runtime registration from database → Full flexibility

But this means I have to manually maintain the dev remote list, which gets out of sync when we add new microfrontends.

Core Question

Is triggering HMR watch from runtime loadRemote() calls architecturally possible with Module Federation + Rsbuild, or does the dev server have to know about remotes at plugin initialization time?

If it's not possible with current architecture, is this a feature request worth exploring for the ecosystem?

Thanks for your time! 🙏