Microfrontends.
One page.
WU Framework composes applications through a common lifecycle, independent of their framework. Each app keeps its technology; WU coordinates mounting and communication. WU CLI prepares your project to get started.
One click in React. One update in Vue.
Click Add one. Two real microapps share a counter through WU. Then unmount Vue and see what happens to the state.
Connecting two microapps…
Click to write to the WU store.
0Updates from the same WU store.
Configuration and isolation.
Choose how you want to load, mount and connect applications. These tools can also be combined.
| Decision | WU Framework | single-spa | Webpack Module Federation |
|---|---|---|---|
| Composition | Lifecycle, store, events and services | Lifecycle and orchestration | Remote module loading and shared dependencies |
| CSS isolation | WU-managed Shadow DOM, per configuration | App strategy; supports Shadow DOM | App and renderer strategy |
| DOM isolation | One Shadow Root per app in this demo; iframe mode is a separate option. | Mount container; the app decides whether to use Shadow DOM. | Federation shares modules; the app decides its DOM container. |
| Typical configuration | WU CLI generates the shell and apps. Configure manifests, grants and lifecycle; ModuleFederationPlugin is not required. | Root config, app registration, activation rules and lifecycle; choose your loader and build. | With webpack: ModuleFederationPlugin, exposes/remotes and the shared policy. Other federation hosts have their own configuration. |
Scope and technical sources
Shadow DOM encapsulates structure and CSS selectors. It is not a security boundary against hostile JavaScript. The configuration described is not a difficulty score or a productivity benchmark.
Official technical sources: webpack / ModuleFederationPlugin · single-spa / CSS · single-spa + Module Federation
Take part in building WU.
Explore the official repositories, share a reproducible case or talk to the creators.
The Forgejo repositories require sign-in. You can also report a bug or suggest an idea through Support.
13 included adapters. Open integration.
You can also connect another technology through a custom lifecycle. Create an integration →
What do you want to build?
Code your screens in JavaScript or TypeScript. Connect your product’s capabilities with WU state, events and services.
Develop web applications with WU →Learn step by step
01 / GET STARTED- 01 / UNDERSTANDWhat is WU
The problem it solves and when it is a good fit.
- 02 / CREATEYour first microapp
Generate the project and check a working React app.
- 03 / EXPANDAdding a second app
Add Vue to the same project and test both apps.
- 04 / BUILDPreparing production
Build the files you will publish and review them in the browser.
Choose how to compose your frontend
Microfrontends and microfronts
What they are, when they fit and which decisions your team still owns.
Understand the architecture →INTEGRATIONChoose your integration
Explore the 13 included adapters and learn to connect another technology through its own lifecycle.
Connect frameworks →COMPARISONWU vs Module Federation
Compare WU, Module Federation and single-spa for what you need to integrate.
Evaluate the options →Continue according to your needs
02 / LOOK UP AND PRACTICELook up an API
Search for mount, store.on, or request. Find parameters, return values, permissions, and usage examples.
SIGNATURES · ERRORS · CLEANUPI AM IN THE TERMINALUse WU CLI
Understand what each command generates, where to edit your app, and how to develop, build, and serve the project.
CREATE · ADD · DEV · BUILD · SERVEI WANT TO TRY ITRun an example
Choose a recipe, read its code, and observe the result. Follow the guide to bring that example into your application.
STATE · EVENTS · SERVICESSOMETHING IS NOT WORKINGFind the cause
Start with a symptom: a blank app, a rejected event, or an unanswered request. Find what to check and how to fix it.
SYMPTOM · CHECK · SOLUTIONHow the applications fit together
VIEW ARCHITECTURE ↗Your first result
03 / IN YOUR PROJECTStart with one app.
The CLI generates an Astro host page and a React microapp. The guide explains which files appear and how to test the counter. You will add Vue in the next step.
Follow the complete guide →npm install --global @wu-framework/cli@1.2.0
wu create mi-plataforma --template react --shell astro
cd mi-plataforma
wu install
wu dev --native --port 3000 --no-openEdit Astro, React and Vue in your browser. The environment installs the example dependencies and starts the preview.
This starter uses JavaScript tooling. Follow the local guide to run WU’s native CLI. Local setup guide →Want to study a complete application? See how this portal is built. To choose npm or CDN, see versions and distribution.