Skip to main content

What is Ragu?

Ragu aims to deliver a simple and coupleless way to organize your front-end into micro-frontends as an embeddable widget.

You can create a micro-frontend using any technology and embed it into any application.

Ragu can also optionally deliver your front-end with SSR (Server Side Rendering) and can deal with shared dependencies between micro-frontends making the user experience even better.

Micro-frontend as widgets#

Ragu can inject a front-end made by any technology into any application.

Front-end injection

It is specially useful for legacy system modernization since you don't need to replace your entire application at once.

Key features#

  • Injects a front-end into any application easily. You can easily inject a front-end even into that your 15-year-old legacy code.
  • Gives more autonomy for teams since they don't need to share an entire front-end monolith.
  • Allows independently deployments since there is no need to update the main application when a micro-frontend has changed.
  • Ragu comes with a built-in server which can render your front-end from the server.

How it works?#

Have you ever looked at the Ragu's homepage code? There are multiple front-ends injected at that page. Ragu comes with a simple cli which builds your project and creates a manifest file.

The manifest file contains all information needed to load that micro-frontend. You give the manifest for Ragu and it will load your micro-frontend.

Demo#

Let's go thought Ragu's homepage micro-frontends and inject them independently.

Onboarding Micro-frontend

import {RaguComponent} from "ragu-client-react";
<RaguComponent src="https://ragu-framework.github.io/ragu-cli/mfe.json?bg=true" />

Core Concept Micro-frontend

import {RaguComponent} from "ragu-client-react";
<RaguComponent src="https://ragu-framework.github.io/ragu/main-features-mfe.json?bg=true" />
Edit this page