Micro Frontends with Module Federation
An open source micro frontend framework built on Module Federation and Rollup.
What makes FynMesh different
Why FynMeshA shared scope apps join by loading
An app joins the page's shared scope when it loads. Nobody maintains a list of who shares with whom, so adding an app to a page means loading it.
Apps addressed by name and semver range
A page asks for fynapp-x1@^2 the way a package asks for a dependency. The old release can stay live under the same name while its consumers move over.
Dependency-ordered boot, middleware and messaging
An app that provides a theme or a layout boots before the apps that use it. Middleware carries those cross-app concerns, and apps message each other over FynBus without importing one another.
Any framework on one loader
Each app ships the framework it was written in, React, Vue, Svelte or anything else. The loader never needs a per-framework bridge.
A live inspector for shared modules
The Federation Inspector shows each shared module, which app supplied it and which ranges asked for it, on the live page.
A bridge from federation to RequireJS
Federated modules can be served to RequireJS under the ids legacy micro frontends already ask for. Bundles that list React or a UI kit as externals then load them from federation, with no rebuild.
How it works
How it works in detail- 1Build each app with Rollup
rollup-plugin-federation turns an app into a FynApp container with an embedded manifest.
- 2Resolve it by name and range
The host page asks the kernel for apps by name and semver range. Your resolver maps them to urls.
- 3Load dependencies first
The kernel walks each app's dependencies, loads them in batches, and boots providers before consumers.
- 4Share what fits
Each shared module resolves to a loaded copy inside the range the app asked for, or loads one that is.
Common questions
All questionsWhat is a FynApp?
A micro frontend that is built and deployed on its own. It exposes a main unit, and the kernel loads it by name and version range.
Does FynMesh need webpack?
No. FynApps build with Rollup and rollup-plugin-federation, and the federation-js runtime loads them in the browser.
Which frameworks work?
React, Vue, Preact, Solid, Svelte and Marko all run side by side in the demo, through the same loader.
Is FynMesh free?
Yes. It is open source under the Apache-2.0 license, and the packages are on npm.