Astro Micro-Frontend Demo

Astro Multi-Framework MFE Demo is a GitHub repository example from ITMAGINATION that runs React, Angular, Vue, Lit, and Web Components together on a single Astro page, demonstrating a micro-frontend (MFE) architecture. The project was built by senior Angular developer Zino Adidi and highlights the non-trivial integration of Angular into Astro, which the accompanying ITMAGINATION blog post 'Astro Micro-Frontends' explains in detail.

What is this template?

This is a starter/demo project that shows how to combine multiple independent frontend frameworks into one Astro site. It takes as input components written in React, Angular, Vue, Lit, and vanilla Web Components and produces a static website via Astro's build pipeline. The repository is distributed through GitHub and is intended as a reference for implementing micro-frontends with Astro rather than a production-ready template.

Key Features

• Multi-framework rendering — Includes working examples of React, Angular, Vue, Lit, and Web Components all mounted on the same page, proving they can interoperate under Astro.
• Angular integration approach — Documents a solution for integrating Angular into Astro, which was not straightforward at the time of development; the technique is outlined in the linked blog post.
• Standard Astro structure — Follows the default Astro layout with src/components (where Astro/React/Vue/Svelte/Preact components live), src/layouts, src/pages for routing, and public for static assets.
• Familiar CLI workflow — npm install, then npm run dev starts a local server on localhost:3000; npm run build outputs a production site to dist/; npm run preview serves the built output.
• Micro-frontend organization — The repo is labeled as an MFE app, making it a practical example for splitting a frontend into independently deployed modules.
• Educational companion — Links to ITMAGINATION's blog post that walks through the architecture and integration decisions.

Who is it for?

• Frontend architects evaluating micro-frontend patterns who need a working example of multiple frameworks under Astro.
• Angular developers trying to adopt Astro, since the Angular integration is the trickiest part and this template demonstrates one solution.
• Platform teams building a proof-of-concept for a multi-framework frontend strategy before committing to a full migration.
• Astro learners wanting to see how to load React, Vue, and Web Components (including Lit) in the same project.

What can you do with this template?

• Experiment with MFEs: Run the dev server and inspect how each framework's component is scoped, hydrated, and rendered by Astro.
• Validate Angular on Astro: Use the included Angular integration as a starting point for your own Astro + Angular project.
• Study the architecture: Read the repository code together with the blog post to understand the tradeoffs of combining frameworks in an Astro build.

How does this template work?

Astro treats every .astro or .md file in src/pages as a route. The demo page imports components from the various frameworks into a single Astro layout, and Astro statically renders them, using client-side hydration where needed. The project relies on Astro's ability to load framework components via integrations, with the Angular integration requiring extra configuration as highlighted in the post. After cloning, the standard commands install dependencies, start a dev server, and build the site.

FAQ

Is this template free?

Yes, the repository is publicly available on GitHub under ITMAGINATION's account, and it can be freely cloned and modified.

Why is Angular integration highlighted?

The author notes that integrating Angular with Astro was not straightforward at the time of development. The blog post explains the steps and the workaround used to make Angular components render inside an Astro page.

How do I run the project?

After cloning the repo, run npm install to install dependencies. Then use npm run dev to start the local development server at localhost:3000, or npm run build to generate a static site in the dist folder.

Which frameworks are included?

The page includes Web Components, React, Angular, Vue, and Lit. All of these are mounted on a single page to demonstrate micro-frontend interoperability.