astro-module-federation

This is an Astro integration that adds the @originjs/vite-plugin-federation to your Astro project.

Usage

Pre-requisites

You need to add a server integration to your Astro app and set the output to server.

Installation

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:

1. 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

2. Add the integration to your astro config

+import astroModuleFederation from "astro-module-federation";

export default defineConfig({
  integrations: [
+    astroModuleFederation({ ... }),
  ],
});

Configuration

For the full list of properties refer to the vite-plugin-federation usage section.

Example for Astro host app

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"
  })
});

Contributing

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.

TODO

• [ ] Figure out how to handle missing assets and styles.
• [ ] Figure out how to use Astro as a remote.

Licensing

MIT Licensed. Made with ❤️ by bartektricks.