A Vite plugin that helps you run a Vite sub-application inside a micro-frontend architecture powered by Garfish.
This plugin adapts Vite-based apps to work smoothly as sub-applications, handling base URL configuration and sandbox compatibility.
npm install --save-dev vite-plugin-garfish-mf
Add the plugin to sub-application's Vite configuration shown below (make sure the plugin is placed after the react or vue plugin, if present):
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import garfish from "vite-plugin-garfish-mf";
export default defineConfig({
plugins: [react(), garfish({
base: "http://localhost:3000",
})
],
});- Overrides Vite’s dev server origin so the sub-app can be correctly loaded by Garfish
- Ensures assets and HMR work as expected in a micro-frontend context
- Supports sandboxed execution to avoid global scope conflicts
This plugin is inspired by the following projects and communities:
Their ideas and implementations were invaluable references when building this plugin.
MIT