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
5 commits 1 branch 0 tags 429 KiB
JavaScript 80.9%
Astro 15%
CSS 4.1%
Find a file
Ayo d1d397ef2c chore(readme): absolute path to screenshot
2024-01-21 20:21:18 +01:00
app-cart initial commit 2024-01-21 20:00:22 +01:00
app-heading chore(readme): more info on the app 2024-01-21 20:18:50 +01:00
app-products initial commit 2024-01-21 20:00:22 +01:00
app-shell initial commit 2024-01-21 20:00:22 +01:00
assets chore(readme): more info on the app 2024-01-21 20:18:50 +01:00
utils initial commit 2024-01-21 20:00:22 +01:00
.gitignore initial commit 2024-01-21 20:00:22 +01:00
LICENSE initial commit 2024-01-21 20:00:22 +01:00
package-lock.json initial commit 2024-01-21 20:00:22 +01:00
package.json initial commit 2024-01-21 20:00:22 +01:00
README.md chore(readme): absolute path to screenshot 2024-01-21 20:21:18 +01:00

README.md

Scalable Shoe Shop

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

Scalable Shoe Shop Screenshot

About

This project was initially forked from this repo, then moved to a new repo for a cleaner history.

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.

Features

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

Usage

Micro frontends

  • Build each micro frontend with npm run build
  • Start each micro frontend with npm run preview

For production you would start the node server in the server folder, after building.

Shell

  • Build the shell with npm run build
  • Start the shell with npm run preview

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.