An example app that uses vite-plugin-federation and react to produce a micro-frontend application using the module federation paradigm.
Multiple separate builds should form a single application. These separate builds act like containers and can expose and consume code between builds, creating a single, unified application.
This is often known as Micro-Frontends, but is not limited to that.
More info in webpack concepts
A small intro module federations can also be found in this dev article by Marais Rossouw.
The micro apps that will be used by the host. This structure, with a single host and multiple remotes, is being used just for convenience. With module federation all the separate applications can use modules shared by other applications.
A react application from where we are going to import a Header component.
This component also publishes events (messages) for the color mode via window.postMessage that all the other applications subscribe to.
Generated using pnpm create vite header --template react-swc-ts
A react application from where we are going to import a Footer component.
Generated using pnpm create vite footer --template react-swc-ts
A react application from where we are going to import a Counter component.
This is a stateful component that uses redux as the state management tool. In order to have a shared state between this remote and the host we are going to inject the counter reducer into the host's store. More info here.
Generated using pnpm create vite counter --template react-swc-ts
A react application that will act like the host, the application that will combine all the remotes.
Generated using pnpm create vite host --template react-swc-ts
build: builds the host and the remotes of the workspaceserve: serves the host and the remotes of the workspacebuild:remotes: builds only the remotes of the workspaceserve:remotes: serves only the remotes of the workspacedev:host: run host in dev modestop: kills the processes of the defined portsadd:module: adds a module recursively in every project of a workspace, excluding the root project, docs. Usage:pnpm add:module <module_name>.
The presentation repository contains a static application created using astro just for the presentation purposes and it is deployed as a GitHub page.
- https://microservices.io/
- https://microfrontend.dev/
- https://micro-frontends.org/
- https://module-federation.io/
- react-vite module federation example: https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/react-vite
- vite guides: https://vitejs.dev/guide/
- pnpm workspaces: https://pnpm.io/workspaces