Skip to content

An sample that illustrates how to migrate from a client-side React.js SPA app, to a micro-frontends application with Web Fragments

Notifications You must be signed in to change notification settings

anfibiacreativa/web-fragments-react-migration-path

Repository files navigation

web-fragments-logo

Migration path from React SPA app, to micro-frontends featuring Qwik and Nuxt.js

Web Fragments documentation New to micro-frontends? Node version TypeScript License JSWorldVideo

Overview | Getting started | Application Design | Migration excercise

Open in GitHub Codespaces

Open in StackBlitz

Overview

This sample demonstrates a migrated monolithic React.js client-side SPA e-commerce application to a micro-frontend architecture using Web Fragments.

Web Fragments are a radically new approach to Web micro-frontends which is framework, tooling, and platform agnostic.

New to micro-frontends? Check out https://microfrontend.dev

Getting started

Local build

Clone or fork this repo, and then run

pnpm i && pnpm build:all && pnpm start:prod

at root level.

This will build the client-side shell and the server, and will start the host-app server on port 8080.

Local devcontainer with Docker

Make sure [Docker] is installed in your system. Go to the root of the project and run

docker build -t web-fragments-shell-app . docker run -p 8080:8080 -p 3000:3000 -p 3001:3001 -p 4174:4174 -p 4175:4175 -p 4176:4176 web-fragments-shell-app

You can then run

pnpm i && pnpm build:all && pnpm start:prod

Application design

The e-commerce application consists of a store route featuring a catalog and the shopping cart area.

webfragments_demo_homepage

Catalog cards link directly to the product detail page.

webfragments_demo_detail

Web Fragments enable the use of unclipped modal boxes! webfragments modal box

Web Fragments inter communication with Bradcast channel

add to cart using broadcast channel micro-frontends

3rd party payment integration in a fully functional micro-architecture

web fragments payment

Application structure

The user interface is composed by the following components

  • homepage
  • product page
  • product detail
  • product card
  • shopping cart

Bonus feature

We have added an AI Slogan Generator, as an additional micro-frontend application, that uses a small local model to generate a new t-shirt slogan!

Migration excercise

The decoupling and migration excercise consists in horizontally splitting the monolithic UI and codebase into multiple applications that are independently developed, released, versioned and deployed, with the following correspondence,

Homepage + productpage -> Shell application React.js client-side Product catalog -> Micro-frontend split 1 -> Nuxt.js Product detail -> Micro-frontend split 2 -> Nuxt.js Shopping cart -> Micro-frontend split 3 -> Qwik

Come back soon! We have more!

We will continue to evolve this demo, while we work towards a stable release!

🫶

About

An sample that illustrates how to migrate from a client-side React.js SPA app, to a micro-frontends application with Web Fragments

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published