Skip to main content
🧙‍♂️ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
Version: 4.xx.xx

Module Federation

Module federation is concept which get different builds to come together to make one application. So in most cases one will be the host application which will bring all other remote components that are built to be shared.

This example demonstrates how to integrate refine with Vite's module federation.

In this example, we have 3 apps:

  • host: The host application which puts all other remote components and auth logic together.
  • blog-posts: Application which exports pages related to blog posts.
  • categories: Application which exports pages related to categories.


npm create refine-app@latest -- --example monorepo-module-federation

cd monorepo-module-federation

npm i

cd host

npm run build && npm run preview

cd ../blog-posts

npm run build && npm run preview

cd ../categories

npm run build && npm run preview

dev mode is only supported for host app, but not for sub apps. This is because Vite does not support module federation in dev mode yet.

So when you made changes in sub apps, you need to rebuild and restart the app(s).

If you are using a library which requires shared context (ie: ColorContextProvider for antd), make sure you are updating vite.config.ts by adding relevant package(s) to shared array.

You need to do this for both host and sub apps which will consume shared context.

Run on your local
npm create refine-app@latest -- --example monorepo-module-federation