Scalable Shoe Shop

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

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

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.