Tooling, Integrations & Production

What sits around your components

You’ve learned how Astro renders pages and hydrates islands. This module is the machinery that surrounds that: the config that wires everything together, the integrations that add capabilities, the TypeScript that keeps you honest, the tests that prove it works, and the build that ships it.

None of this is exotic — Astro sits on top of Vite, so most of it is familiar tooling with a thin Astro layer. The goal here is to know which knob does what.

What this module covers

Lesson	What you’ll learn
Config & integrations	`astro.config.mjs`, the integrations system, and Vite underneath
TypeScript & content types	Typing props and locals, and the types generated from your content schemas
Testing & tooling	Vitest, the Container API, Playwright, and the Dev Toolbar
Deployment & ecosystem	Static vs on-demand deploys, and the Astro ecosystem

The pipeline from source to site

flowchart LR
  config["astro.config.mjs
(integrations, adapter)"] --> build["astro check + astro build"]
  src["src/ (pages, components, content)"] --> build
  build --> dist["dist/ (HTML, assets, server entry)"]
  dist --> deploy["deploy: static CDN or adapter runtime"]

From project to deployed site

Everything flows through the config and the build. Get comfortable with those two and the rest is detail.