Micro Frontends + Rsbuild + Module Federation in a Monorepo? Yes, We Do!

“Looking to study, prototype, or structure a project with Micro Frontends (MF) in a modular and high-performance way?”

In recent days, I've delved into an experiment that can greatly simplify the lives of those working with micro frontends daily.

I created an open-source repository using:

• Rsbuild: A modern and fast alternative to Webpack
• Module Federation: To isolate and share components between apps
• pnpm + Lerna: To orchestrate everything in a lightweight and organized manner

A simple yet powerful structure:

• apps/mf_provider: exposes components
• apps/mf_consumer: consumes via Module Federation
• All running in parallel with pnpm dev

Check it out, and if you like it, drop a like or send some feedback!

👉 GitHub Repository

🔍 A Few Fun Facts

📦 Catalogs

The pnpm package manager has a really cool feature called Catalogs. It allows you to define dependency versions as constants, which can then be reused inside the package.json of each internal module.

Example:

# pnpm-workspace.yaml
# Define a catalog of version ranges.
catalog:
  react: "^18.3.1"
  react-dom: "^18.3.1"

In the internal modules, you can reuse the version defined in pnpm-workspace.yaml:

"dependencies": {
  "react": "catalog",
  "react-dom": "catalog"
}

⚙️ Lerna and Parallelism

Another cool thing is how practical Lerna makes it to set up a monorepo. It allows you to run multiple apps in parallel with a single command, like in the example below:

"dev": "lerna run --parallel dev"

✅ Conclusion

Rsbuild + Module Federation turned out to be extremely simple to structure and understand, especially compared to using the plugin with Webpack.

In the next article, I’ll share an example using Vite, so we can get a practical comparison.

See you soon!

Werliton Silva

Frontend Specialist | Bug Hunter | Evangelist of hasOwnProperty() since 2012