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
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.
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
The e-commerce application consists of a store route featuring a catalog and the shopping cart area.
Web Fragments enable the use of unclipped modal boxes!
The user interface is composed by the following components
- homepage
- product page
- product detail
- product card
- shopping cart
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!
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
We will continue to evolve this demo, while we work towards a stable release!
🫶