This is a playground to test out module federation. In this playground we have 3 apps:
-
rsbuild-example-remote
- a remote app that exports a componentThis app is built with RSBuild and exports a component using module federation. It also uses a styled component library (Mantine)
-
rsbuild-example-host
- a host app that imports the remote componentThis another app built with RSBuild that imports the remote component and renders it inside a grid. It uses the same styled component library as the remote app so that the imported component is styled the same way as the remote app.
-
nextjs-example-host
- a host app that imports the remote componentThis app is built with Next.js and imports the remote component and renders it. It also uses Mantine to style the component. The part of the app that isn't the remote component is rendered on the server. (Just some text around the remote component) To import the remote component it uses the module federation plugin for Next.js. The Next.js app uses page routing and not app routing because the module federation plugin for Next.js doesn't support app routing. (App routing probably will be supported in the future)
You can run the apps by running the following commands:
Install the dependencies for all the apps:
pnpm install
Run the remote app and the RSBuild host app:
pnpm start:rsbuild
Run the remote app and the Next.js host app:
pnpm start:next
To start an app separately you can run the following commands:
pnpm start:remote
For the remote app
pnpm start:rsbuild
For the RSBuild host app
pnpm start:next
For the Next.js host app
To run the apps in development mode, you can run use dev
instead of start
before the :
in the commands above.
The remote app will be running on http://localhost:8081
, the RSBuild host app will be running on http://localhost:8080
and the Next.js host app will be running on http://localhost:3000
.
The RSBuild apps are not rendered on the server, because RSBuild doesn't support SSR. (For whole pages. Styled-components are SSR compatible)
The Next.js app is rendered on the server, but the remote component is rendered on the client. This is because the remote component is not SSR compatible on Next.js when the remote app isn't a Next.js app that renders the component on the server. (Only the remote app can render the component on the server) (https://github.com/module-federation/nextjs-ssr)