module-federation/module-federation-examplesPublic

NotificationsYou must be signed in to change notification settings
Fork1.8k
Star5.9k

Implementation examples of module federation , by the creators of module federation

License

MIT license

5.9k stars 1.8k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 3,001 Commits
.github		.github
advanced-api		advanced-api
angular-universal-ssr		angular-universal-ssr
apollo-client		apollo-client
basic-host-remote		basic-host-remote
bi-directional		bi-directional
clo		clo
cloud		cloud
complete-react-case		complete-react-case
comprehensive-demo-react16		comprehensive-demo-react16
comprehensive-demo-react18		comprehensive-demo-react18
cra		cra
css-isolation		css-isolation
cypress-e2e		cypress-e2e
dashboard-admin-react-rspack-material-ui		dashboard-admin-react-rspack-material-ui
different-react-versions-16-17-typescript		different-react-versions-16-17-typescript
different-react-versions-16-17		different-react-versions-16-17
different-react-versions-16-18		different-react-versions-16-18
different-react-versions-isolated		different-react-versions-isolated
different-react-versions-typescript		different-react-versions-typescript
different-react-versions		different-react-versions
docs		docs
dynamic-remotes-node-typescript		dynamic-remotes-node-typescript
dynamic-remotes-node		dynamic-remotes-node
dynamic-system-host		dynamic-system-host
federated-css-react-ssr		federated-css-react-ssr
federated-css		federated-css
federated-library-from-cdn		federated-library-from-cdn
federated-npm		federated-npm
frontend-discovery-service		frontend-discovery-service
genesis		genesis
i18next-nextjs-react		i18next-nextjs-react
loadable-react-16		loadable-react-16
loadable-react-18		loadable-react-18
medusa-delegate-example		medusa-delegate-example
medusa-example		medusa-example
medusa-nx-native-federation-example		medusa-nx-native-federation-example
modernjs-classic-tractor-example		modernjs-classic-tractor-example
modernjs-medusa		modernjs-medusa
modernjs-ssr		modernjs-ssr
modernjs		modernjs
module-federation-vite-angular		module-federation-vite-angular
module-federation-vite-react		module-federation-vite-react
module-federation-vite-solid		module-federation-vite-solid
module-federation-vite-svelte		module-federation-vite-svelte
module-federation-vite-vue3		module-federation-vite-vue3
native-federation-react		native-federation-react
native-federation-tests-typescript-plugins		native-federation-tests-typescript-plugins
nested-remote		nested-remote
nextjs-csr		nextjs-csr
nextjs-dynamic-ssr		nextjs-dynamic-ssr
nextjs-host-react-remote		nextjs-host-react-remote
nextjs-ssr-react-query		nextjs-ssr-react-query
nextjs-ssr		nextjs-ssr
quasar-cli-vue3-webpack-javascript		quasar-cli-vue3-webpack-javascript
react-16-17-18-ssr		react-16-17-18-ssr
react-18-code-splitting		react-18-code-splitting
react-18-server-2-server		react-18-server-2-server
react-18-ssr		react-18-ssr
react-in-vue		react-in-vue
react-livereload		react-livereload
react-manifest-example		react-manifest-example
react-nextjs		react-nextjs
react-preact-runtime-typescript		react-preact-runtime-typescript
react-sharedworker		react-sharedworker
react-storybook		react-storybook
redux-reducer-injection		redux-reducer-injection
remix		remix
rsbuild-vue3-vuex		rsbuild-vue3-vuex
rspack-remix		rspack-remix
rspack-webpack-interop		rspack-webpack-interop
rspack-webpack-offload		rspack-webpack-offload
rspack_hmr		rspack_hmr
runtime-plugins		runtime-plugins
rust-wasm		rust-wasm
self-healing		self-healing
server-side-render-only		server-side-render-only
server-side-rendering		server-side-rendering
shared-context		shared-context
shared-directory		shared-directory
shared-routes2		shared-routes2
shared-routing		shared-routing
shared-store-cross-framework		shared-store-cross-framework
simple-node		simple-node
styled-components		styled-components
third-party-scripts		third-party-scripts
typescript-monorepo		typescript-monorepo
typescript-project-references		typescript-project-references
typescript-react-fallback		typescript-react-fallback
typescript-react-monorepo-test		typescript-react-monorepo-test
typescript-react-monorepo		typescript-react-monorepo
typescript		typescript
umd-federation		umd-federation
vue-cli		vue-cli
vue2-in-vue3		vue2-in-vue3
vue3-cli-demo		vue3-cli-demo
vue3-demo		vue3-demo
.cursorignore		.cursorignore
.gitignore		.gitignore
.gitmodules		.gitmodules

Repository files navigation

Module Federation Examples

This repository is to showcase examples of how Webpack 5's new Module Federation can be used.

Module Federation Universe

Module federation enhances collections:Universe
Module Federation Docs:Module Federation Docs

List of Examples

Click here to see the detailed list of examples in this repoFull Examples List

Check out our book

	We will be actively updating this book over the next year as we learn more about best practices and what issues people are running into with Module Federation, as well as with every release of Webpack as it moves towards a release candidate and release. So with your one purchase you are buying a whole year of updates.

Consultations

1 Hour group consultation	$100
30 Min 1:1 consultation	$60
15 Min 1:1 consultation	$30
Bespoke API modifications and hands on code	$300-$500/hr

Notes

The examples in this repository leveragepnpm and workspaces. To run from a git checkout locally, remove all of the proprietary example directories, ensure you have pnpm installed and run installpnpm i at the repo root.You can then runpnpm start from any of the non-proprietary examples. Some examples may use a different command such as "dev" or "serve".

Module federation will work with any type of file that you're able to import, that Webpack understands how to process. It is not a JS only, or React only feature. Images, CSS, JSON, WASM, and anything else can be federated.