Astro Shared Component Architecture
One component system for 12 sites
Design and implementation of an Astro architecture that shares components, styles, and logic across 12 websites, with optimized deployment pipelines and centralized asset management.
The Problem
12 websites with duplicated components, inconsistent styles, and manual deployment processes. Every brand change or feature required updating each site individually, multiplying effort and errors.
The Solution
Implemented a monorepo with pnpm workspaces and Turborepo. Shared components in a central package with semantic versioning. CI/CD pipeline that detects which sites were affected by a change and only deploys those. Asset optimization with centralized image processing.
The Results
Feature implementation time drastically reduced, visual consistency guaranteed, incremental builds that only deploy what's needed, and a single place to maintain core components.
Measurable Results
New feature time
12x (por sitio)
1x (compartido)
92% improvement
Build time
25 min (todos)
3 min (afectados)
88% improvement
Asset size
Duplicados
Centralizado R2
60% improvement
Sites managed
12
Project Phases
Component analysis
1 weekAudit of all 12 sites to identify duplicated components, variations, and sharing candidates.
Monorepo design
1 weekWorkspace structure, package conventions, and versioning strategy.
Component extraction
2 weeksMigration of components to shared packages with typed APIs and per-site configurable props.
CI/CD pipeline
1 weekGitHub Actions with Turborepo for incremental builds and selective deployment to Cloudflare Workers with minimal SSR.
Asset optimization
1 weekCentralized image processing, CDN with R2, and optimized lazy loading.
Tech Stack
Technologies
Cloud Services (CLOUDFLARE)
Tools
Implementation Details
The copy-paste problem
When you have 12 sites sharing a header, footer, contact forms, and UI components, copy-paste becomes exponential technical debt. A change to the footer means 12 PRs, 12 reviews, and 12 chances for error.
The solution: monorepo with typed components
packages/
├── ui/ # Base components (Button, Card, Badge)
├── layout/ # Header, Footer, Navigation
├── forms/ # Contact, Newsletter, Lead capture
└── analytics/ # PostHog, GTM, tracking utilities
sites/
├── site-1/
├── site-2/
├── site-3/
└── ... (9 more)Each component accepts configuration props that allow per-brand variations without duplicating code.
Have a similar technical challenge?
Let's talk about your infrastructure, architecture or pipeline. No commitment.
Schedule a Technical Assessment