This is an Astro integration that adds the @originjs/vite-plugin-federation to your Astro project.
You need to add a server integration to your Astro app and set the output to server
.
Install the integration automatically using the Astro CLI:
pnpm astro add astro-module-federation
npx astro add astro-module-federation
yarn astro add astro-module-federation
Or install it manually:
- Install the required dependencies
pnpm add astro-module-federation
pnpm add @originjs/vite-plugin-federation -D
npm install astro-module-federation
npm install @originjs/vite-plugin-federation -D
yarn add astro-module-federation
yarn add @originjs/vite-plugin-federation -D
- Add the integration to your astro config
+import astroModuleFederation from "astro-module-federation";
export default defineConfig({
integrations: [
+ astroModuleFederation({ ... }),
],
});
For the full list of properties refer to the vite-plugin-federation usage section.
Example config with the Node and React adapters
export default defineConfig({
output: "server",
integrations: [react(), moduleFederation({
remotes: {
viteApp: "http://localhost:4173/assets/remoteEntry.js"
},
shared: ['react', 'react-dom']
})],
adapter: node({
mode: "standalone"
})
});
This package is structured as a monorepo:
-
playground
contains code for testing the package -
package
contains the actual package
Install dependencies using pnpm:
pnpm i --frozen-lockfile
Start the playground:
pnpm playground:dev
Vite Remote App Astro Host App
You can now edit files in package
. Please note that making changes to those files may require restarting the playground dev server.
- [ ] Figure out how to handle missing assets and styles.
- [ ] Figure out how to use Astro as a remote.
MIT Licensed. Made with ❤️ by bartektricks.