🔁 @antdevx/vite-plugin-hmr-sync

A minimal and powerful Vite plugin that synchronizes Hot Module Reloading (HMR) across multiple Vite apps — perfect for micro-frontends, monorepos, or Module Federation setups.

When one app rebuilds, others automatically reload in development. No manual refresh, no stale modules.

🧠 Use Case: Micro-Frontend in Dev Mode

You have:

• A Host App that dynamically loads Remote Apps using Module Federation or import maps.
• All apps run separately using their own vite dev servers.
• You want the Host to automatically reload when a Remote rebuilds.

Without this plugin:
You must manually reload the browser to see updates from the remote.

With this plugin:

1. Remote App uses notifyOnRebuild() to ping the host when it finishes rebuilding.
2. Host App uses listenForRemoteRebuilds() to receive the ping and trigger a hot reload.

🔥 You stay in sync across apps in development — like magic.

📦 Installation

npm install @antdevx/vite-plugin-hmr-sync --save-dev

🧩 Example Setup

📁 Project Structure

.
├── host-app/
│   └── vite.config.ts
│
└── remote-app/
    └── vite.config.ts

🔌 Host App Setup

// host-app/vite.config.ts
import { defineConfig } from 'vite';
import { listenForRemoteRebuilds } from '@antdevx/vite-plugin-hmr-sync';

export default defineConfig({
  plugins: [
    listenForRemoteRebuilds({
      allowedApps: ['remote-app'],
      endpoint: '/on-child-rebuild',
      hotPayload: { type: 'full-reload', path: '*' },
      onRebuild: (appName) => {
        console.log(`[host-app] 🔁 Triggered by: ${appName}`);
      }
    })
  ],
  server: {
    port: 5173
  }
});

🔔 Remote App Setup

// remote-app/vite.config.ts
import { defineConfig } from 'vite';
import { notifyOnRebuild } from '@antdevx/vite-plugin-hmr-sync';

export default defineConfig({
  plugins: [
    notifyOnRebuild({
      appName: 'remote-app',
      hostUrl: 'http://localhost:5173', // Host app's dev server
      endpoint: '/on-child-rebuild',
      notifyOnSuccessOnly: true
    })
  ],
  server: {
    port: 5174
  }
});

⚙️ API Reference

listenForRemoteRebuilds(options)

Listens for incoming HTTP requests from other apps to trigger HMR.

notifyOnRebuild(options | appName)

Notifies a remote server (e.g., host app) after a successful rebuild.

📁 Nodemon + HMR Sync Setup

Use startBuildAndServer() to auto-build and serve your app with rebuild notifications.

🔧 nodemon.json Example

{
  "watch": [
    "src",
    "quasar.config.ts"
  ],
  "ext": "js,ts,vue,scss,json",
  "exec": "node -e \"import('@antdevx/vite-plugin-hmr-sync').then(m => m.startBuildAndServer())\"",
  "hmrSync": {
    "port": 5002,
    "notify": true,
    "hostUrl": "http://localhost:5000",
    "appName": "todo-form",
    "buildCommand": "quasar build",
    "serveCommand": "quasar serve"
  }
}

📜 package.json

"scripts": {
  "build:watch": "nodemon"
}

🛠 Available hmrSync / startBuildAndServer() Options

🔗 Workflow Overview

[remote-app] buildEnd() 🔔
      ↓
Sends request to host endpoint `/on-child-rebuild?app=remote-app`
      ↓
[host-app] listens and validates app name
      ↓
Triggers Vite's `server.ws.send(hotPayload)` → 🔁 Full page reload

🥪 Development Tips

• Use different ports for each app in vite.config.ts.
• Ensure app names match in notifyOnRebuild(appName) and allowedApps on the host.
• Combine with Vite’s native server.proxy to load remotes via localhost.

💡 Troubleshooting

👥 Contributors

Maintained by @antdevx

📜 License

MIT © antdevx

🙌 Like it?

Star ⭐ the repo and share with others using Vite and micro-frontends!