eraykeskinmac / mfng

Micro Frontends Next Generation – A Serverless RSC Playground

MFNG - A React Server Components Playground

Motivation

Exploring Possibilities for Next-Generation Microfrontends

Do we still need to deploy microfrontends and their APIs (also known as BFFs) independently of the main app? Or can we instead compose them at build-time (lazily) and utilize server components to let them fetch their data on the server?

Features

• Streaming fast
• React server components
• Server-side rendering
• Client components loaded as separate chunks
• Server actions
• Progressively enhanced form actions
• Suspensy routing
• Development server
• Production builds
• Serverless deployment examples
  • using a Cloudflare Worker
  • using a Vercel Edge Function
• Support poisoned imports
• Microfrontend composition demo
• Advanced routing

Getting Started

npm install

npm run dev

Open http://localhost:3000

Deployment

To deploy the workers to your own workers.dev domain, first create a Cloudflare API Token, then run:

CLOUDFLARE_API_TOKEN=<insert-your-token> npm run deploy

Deploying via GitHub Actions

To deploy via GitHub Actions, follow these steps:

1. Fork the repository.
2. Create a new environment with the name "Cloudflare Workers".
3. Add the environment secret CLOUDFLARE_API_TOKEN using your own token as the value.
4. Push a commit to the main branch.

---

Please let me know in the issues if any of these steps do not work for you.