Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ragu-framework/ragu
🔪 A micro-frontend framework with Server Side Rendering.
https://github.com/ragu-framework/ragu
hacktoberfest micro-frontend micro-frontend-framework micro-frontends react server-side-rendering vue
Last synced: about 1 month ago
JSON representation
🔪 A micro-frontend framework with Server Side Rendering.
- Host: GitHub
- URL: https://github.com/ragu-framework/ragu
- Owner: ragu-framework
- License: mit
- Created: 2020-08-31T06:18:30.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T04:56:49.000Z (about 2 years ago)
- Last Synced: 2025-01-10T17:31:46.836Z (about 1 month ago)
- Topics: hacktoberfest, micro-frontend, micro-frontend-framework, micro-frontends, react, server-side-rendering, vue
- Language: TypeScript
- Homepage: https://ragu-framework.github.io/
- Size: 9.86 MB
- Stars: 88
- Watchers: 2
- Forks: 3
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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.
[](https://coveralls.io/github/carlosmaniero/ragu?branch=main)
## Articles:
- [Micro-frontends with React, Vue and Ragu](https://medium.com/@carlosmaniero/micro-frontends-with-react-vue-and-ragu-c5a2e3ecc2ab)
- [Transforming your Vue.js project into Micro-frontends with Server Side Rendering](https://medium.com/@carlosmaniero/transforming-your-vue-js-project-into-micro-frontends-with-server-side-rendering-9cdaab16f5e9)
## Installation
```shell script
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](https://www.thoughtworks.com/en/radar/techniques/front-end-integration-via-artifact)
### 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](https://github.com/carlosmaniero/ragu/tree/main/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](https://reactjs.org/docs/react-dom-server.html#rendertostring))
and have a hydration mechanism such as [ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate).
