ayo/shoe-shop
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Ecommerce demo of micro-frontends architecture using Astro as a shell
23 commits 1 branch 0 tags 429 KiB
JavaScript 80.9%
Astro 15%
CSS 4.1%
Find a file
Ayo 12643e30bb chore: add husky; add post-commit auto import to gh & sh
2026-02-22 19:56:36 +01:00
.husky chore: add husky; add post-commit auto import to gh & sh 2026-02-22 19:56:36 +01:00
app-cart refactor: pass down products from shell 2024-01-26 11:00:11 +01:00
app-heading refactor: pass down products from shell 2024-01-26 11:00:11 +01:00
app-products refactor: pass down products from shell 2024-01-26 11:00:11 +01:00
app-shell refactor: pass down products from shell 2024-01-26 11:00:11 +01:00
assets chore(readme): more info on the app 2024-01-21 20:18:50 +01:00
utils refactor: pass down products from shell 2024-01-26 11:00:11 +01:00
.gitignore chore: update .gitignore 2026-02-22 19:56:02 +01:00
LICENSE initial commit 2024-01-21 20:00:22 +01:00
package.json chore: add husky; add post-commit auto import to gh & sh 2026-02-22 19:56:36 +01:00
pnpm-lock.yaml chore: add husky; add post-commit auto import to gh & sh 2026-02-22 19:56:36 +01:00
pnpm-workspace.yaml chore: add husky; add post-commit auto import to gh & sh 2026-02-22 19:56:36 +01:00
README.md chore: update README.md 2024-07-30 12:01:27 +02:00

README.md

Warning

This is just a demonstration, not a recommendation. Don't hesitate to reach out if you have questions. -ayo

Scalable Shoe Shop

An e-commerce page as a demonstration of using Astro as shell for a microfrontends application.

Demo was given in a talk about Astro & Micro-Frontends

Scalable Shoe Shop Screenshot

About

Each app is a node workspace to allow for running common commands easily and developing libraries they can install as dependency (e.g., utils). In a real-world setting they could be maintained in separate repositories by different teams.

This demo takes advantage of EcmaScript Modules (ESM) and url-imports to do client-side composition of microfrontends. Express is used for serving assets, but ideally one would have a dedicated CDN hosting them.

Code structure

  1. app-heading & app-cart are React apps
  2. app-products are a SolidJS app
  3. app-shell is an Astro app
  4. utils is a library for utilities that the micro-frontend apps can install as dependency

Background

This project was initially forked from this repo, then moved here for a cleaner history. Massive thanks to sasoria for his work on the initial demo.

Features

  • ✨ Client-side composition of microfrontends
  • 📦 Multiframeworks with Astro Islands
  • 🚀 SSG/SSR supported by Astro

Usage

DX in this demo is not that easy, because we are simulating the development of multiple apps that in reality would have separate delivery pipelines and possibly maintained by different teams.

Currently each app has a build:preview script that represents the process of building & deploying them, ideally in a CDN.

Open the app-shell and each MF app (i.e., app-cart, app-heading, app-products) in separate terminals and run "npm run build:preview" for each.

You have to rerun this for any app you modify.

You will see the benefit of this in scale as you don't need to rebuild a single big app for changes only in smaller frontend parts.

Shared dependencies

Dependencies such as react and react-dom are shared across applications. They are fetched from esm.sh and gets cached in the browser, reducing the bundle size. Each app can share other dependencies as well through url imports.