module-federation / Module Federation Examples
Licence: mit
Implementation examples of module federation , by the creators of module federation
Stars: ✭ 979
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Module Federation Examples
Examples
Demo applications and code examples for Confluent Platform and Apache Kafka
Stars: ✭ 571 (-41.68%)
Mutual labels: examples, demo
Golang For Nodejs Developers
Examples of Golang compared to Node.js for learning
Stars: ✭ 2,698 (+175.59%)
Mutual labels: examples, demo
Server
☁️ Nextcloud server, a safe home for all your data
Stars: ✭ 17,723 (+1710.32%)
Mutual labels: federation, federated
Posse gallery
Posse's fancy new gallery for Flutter.
Stars: ✭ 174 (-82.23%)
Mutual labels: examples, demo
Helloworld Msa
Main repository with documentation and support files
Stars: ✭ 218 (-77.73%)
Mutual labels: examples, demo
Next On Netlify Demo
Demo of a Next.js app with Server-Side Rendering on Netlify
Stars: ✭ 40 (-95.91%)
Mutual labels: nextjs, demo
automatic-vendor-federation
Utility to enable automatic vendor sharing within bundles using Module Federation
Stars: ✭ 69 (-92.95%)
Mutual labels: module, federation
Terrarium Templates
Template and example projects for Fastly Labs Terrarium https://wasm.fastlylabs.com
Stars: ✭ 21 (-97.85%)
Mutual labels: examples, demo
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-96.42%)
Mutual labels: module
Rcppexamples
Examples of using Rcpp to interface R and C++
Stars: ✭ 33 (-96.63%)
Mutual labels: examples
Purescript Halogen Storybook
A library to assemble examples or develop components separately.
Stars: ✭ 33 (-96.63%)
Mutual labels: examples
Wordpress Api Nextjs Theme
A workshop on creating a WordPress theme with React and Next.js for WordCamp Montreal
Stars: ✭ 36 (-96.32%)
Mutual labels: nextjs
Jcnavigator
A decoupled navigator framework of jumping between modules or apps for iOS development.
Stars: ✭ 33 (-96.63%)
Mutual labels: module
Easyandroid
一个完整基于kotlin的安卓开发框架,采用了mvvm设计模式。涵盖了: 1、基于retrofit2封装的通过kotlin协程实现的网络框架 2、基于阿里开源router修改的api-router实现项目模块化 3、基于glide的图片加载缓存框架 4、基于room实现的往来数据缓存加载 5、基于step实现的数据异步提交 6、基于PreferenceHolder实现的本地数据快速存储 7、基于mlist实现的简单复杂列表的快速开发扩展 8、定制的toolbar可以自适应异形屏,挖孔屏,水滴屏等等。。 本框架几乎涵盖了开发所需的所有模块组件。简单fork之后就可以基于框架快速开发。
Stars: ✭ 33 (-96.63%)
Mutual labels: module
Stripe Demo Connect Roastery Saas Platform
Roastery demo SaaS platform using Stripe Connect
Stars: ✭ 33 (-96.63%)
Mutual labels: nextjs
Module Federation Examples
This repository is to showcase examples on Webpack 5's new Module Federation can be used.
If you need support, consider looking at my sponsor profile https://github.com/sponsors/ScriptedAlchemy | For companies that require consultations, contact me on twitter or email (on github profile) |
---|---|
Youtube Screencasts | https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ |
Info site | https://module-federation.github.io/ |
Official Docs | https://webpack.js.org/concepts/module-federation |
Original Webpack Issue | https://github.com/webpack/webpack/issues/10352 |
Medium post | https://link.medium.com/xzFgBBtAx6 |
JSNation Presentation | https://github.com/sokra/slides/blob/master/content/ModuleFederationWebpack5.md |
Check out our book
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 |
Examples
Legend:
- ⚠️: In Progress/Incomplete
- 🔒: Depends on proprietary code that isn't free.
- [x] Advanced API — showcasing advanced API use, also seen in other examples
- [x] Basic Host-Remote — App 1 consumes remote components from App2.
- [x] Startup Code — Advanced implementation that attaches initialization code to the remote container itself. Useful for dynamically setting publicPath in the remote.
- [x] Bi-Directional Hosts — App1 consumes App2 components; App2 consumes App1 components.
- [x] Self-Healing — Fallback to remote apps vendors if a dependency fails to load.
- [x] ⚠️ Server-Side Rendering — App1 and App2 with SSR (Broken because of @loadable/component - check readme in demo.
- [x] Server-Side Rendering (simplified) — Less complex boilerplate.
- [x] Multi UI Framework Federation — Multiple Apps in different technologies federated.
- [x] Dynamic System Host — Swap between remotes at runtime.
- [x] Redux Reducer Injection — Dynamically inject reducers to host store at runtime.
- [x] Shared Routes — Compose federated routes for a seamless user experience.
- [x] Nested Components — Nested remote components.
- [x] Share Context Provider — App1 and App2 with shared Context Provider.
- [x] Federation Dashboard Example — Single example implementing Module Federation Dashboard
- [x] 🔒 Streaming Federated Code — App1 and federated-middleware deploy to s3. App1 then stream's federated code directly from S3
- [x] Non-UI Module
- [x] Routing — An example of sharing router context. Also worth looking at - Routing 2
- [x] Version Discrepancy — Federated apps depending on different versions of a dependency without side-effects.
- [x] TypeScript — Simple host/remote example using TypeScript.
- [x] Angular Universal — Remote and Host app with SSR, lazy modules and components.
- [x] NextJS Sidecar Build — Sidecar build to enable module-federation alongside Next codebases
- [x] ⚠️ NextJS — Operation, with workarounds. v10 will support async
- [x] Building A Plugin-based Workflow Designer With Angular and Module Federation — External Example
- [x] Vue.js — Simple host/remote (render function / sfc) example using Vue 3.0.
Notes
To run from a git checkout locally, remove all of the proprietary example directories and then run yarn
at the repo root.
You can then run yarn && yarn start
from any of the non-proprietary examples.
Module federation will work with any type of file that youre able to import, that webpack underestands how to process. It is not a JS only, or react only feature. Images, CSS, JSON, WASM, and anything else can be federated.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].