Ragu: A micro-frontend framework

Ragu is a micro-frontend framework designed to enable multiple teams to work at the same product but in different codebase.

Articles:

• Micro-frontends with React, Vue and Ragu
• Transforming your Vue.js project into Micro-frontends with Server Side Rendering

Installation

npx ragu-server init my-project

Core principles:

No artefact integration 📦 ➡️ 📦

The most common pattern when organization want to share code between teams is to create a private npm package and use this package across products. One of the main issues of this approach is that every time the shared package is updated a new build is required for each application that used the shared package.

Read more at Front-end integration via artifact - ThoughtWorks Tech Radar

Build system included 🚚

Ragu Server comes with a build system on top of webpack which you can extend though the ragu server configuration.

Server side rendering 📄

Ragu server enables SSR by default and exposes an API where you can get the HTML result from any component. You can write your own Ragu client for any language.

Read more about Ragu Server

Framework agnostic 🧩

You can write a Ragu Component using any framework you want since they enable you to have the render result as HTML string (such as ReactDOMServer.renderToString) and have a hydration mechanism such as ReactDOM.hydrate.