Watermelon (Vite Microfrontend Architecture with Module Federation)

This demonstrates a microfrontend setup using Vite, @originjs/vite-plugin-federation, and multiple frameworks: Vue (host and remote), React, Svelte, and SolidJS.

Project Structure

root/
├─ vite-hostapp/             # Vue 3-based host application
├─ vite-remoteapp-1/         # React-based remote app
├─ vite-remoteapp-2/         # Vue-based remote app
├─ vite-remoteapp-3/         # Svelte-based remote app
├─ vite-remoteapp-4/         # SolidJS-based remote app
...

---

Usage

1. Module Federation Mode (for Host + Remotes integration)

This mode is for when you want to run the full microfrontend architecture — the host loads remote apps' modules via module federation.
Remotes must be run in build/preview mode so the host can fetch the remoteEntry.js files.

For each remote app (React, Vue, Svelte, SolidJS):

cd vite-remoteapp-N
npm install
npm run build
npm run preview
# The default preview port is usually 4173, but check your config/terminal for the correct port

Note: Make sure each remote is previewing on the port specified in your host's federation config.

For the host app (Vue-based):

cd vite-hostapp
npm install
npm run dev
# The host will fetch remote modules from the preview servers.

---

2. Standalone Development Mode (for working on an individual remote app)

If you want to work on any remote app as a regular standalone SPA, launch it with a special config that disables federation.

For any remote app:

cd vite-remoteapp-N
npm install
npm run dev
# This uses vite --config vite.dev.config.ts and loads the app as standalone.

• This enables fast HMR and regular SPA behavior for isolated development.
• You can access the app at the port specified in config.

---

Scripts Explained

• npm run dev: Runs the app in standalone mode for individual development using vite --config vite.dev.config.ts
• npm run build: Builds the remote/host for preview or production
• npm run preview: Serves the built app (remotes must use this for federation!)

---

Federation Configs

• Remote apps: Main federation config is in vite.config.ts (for build/preview/federation usage).
• Standalone mode: Uses vite.dev.config.ts to run as a normal SPA, with no federation.
• Host app: Federation config in vite.config.ts uses remote URLs matching your remotes' preview ports.

---

Example Workflow

1. Start all remote apps in preview mode:

   • cd vite-remoteapp-1 && npm run build && npm run preview
   • cd vite-remoteapp-2 && npm run build && npm run preview
   • ...repeat for other remotes

2. Start host app:

   • cd vite-hostapp && npm run dev

3. The host loads remote components from the running preview servers.

---

Notes

• Never use npm run dev for remotes during federation.
  The host requires the remoteEntry.js asset, which is only served in preview mode after build.
• Use npm run dev only for local, standalone development/testing on a single remote app.
• Each app can be further customized—refer to its README or configs for framework-specific notes (Coming soon).

---

Credits

• Built with Vite and @originjs/vite-plugin-federation.
• Example covers federated microfrontends in React, Vue, Svelte, and SolidJS.

---