afonsojramos / astro-microfrontends

Framework Agnostic Microfrontends using ESM Imports and Astro Islands

Home Page:https://www.youtube.com/live/OXW_q5bMmRs?feature=share&t=5952

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

esm-microfrontends

This demo takes advantage of EcmaScript Modules (ESM) and url-imports to do client-side composition of microfrontends. Vite is used to bundle each microfrontend and Astro is used to bundle the shell.

Features

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

Usage

  • Build and serve each microfrontend with pnpm build && pnpm serve
  • Start the shell with pnpm dev

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.

About

Framework Agnostic Microfrontends using ESM Imports and Astro Islands

https://www.youtube.com/live/OXW_q5bMmRs?feature=share&t=5952


Languages

Language:JavaScript 38.1%Language:Astro 29.2%Language:CSS 16.6%Language:TypeScript 9.5%Language:HTML 6.7%