Astro

Astro integration

Astro integration is a package that hooks into Astro's config, dev server, or build to add a feature. React support, a sitemap, and an adapter are all integrations.

How it is measured

Open astro.config and read the integrations array. Each entry is a function call that returns an object with named hooks, such as astro:config:setup and astro:build:done. The order of the array is the order the hooks run.

Confirm what one does by running a build with it and without it, then diffing the dist folder. A sitemap integration adds sitemap-index.xml. A framework integration adds nothing visible until you use a component.

Worked example

A law firm site adds the sitemap integration and the MDX integration in one afternoon. The build now writes sitemap-index.xml listing 87 URLs and accepts .mdx files in the blog folder.

A third integration, added for analytics, injects a script into every page head. The team finds out when the "zero scripts" check fails on the contact page.

How it differs

An Astro integration extends the build and dev tools. The astro.config file is where you list integrations and set options for them. The file is the switchboard; each integration is a device plugged into it.

Common errors

Installing by hand and forgetting to register it in the config. Adding integrations whose hooks conflict. Not reading what script an integration injects. Pinning no versions and breaking the build on upgrade. Using a community integration abandoned two majors ago.

In practice

Use astro add so the config edit and install happen together. After each addition, run a build and diff the output. Remove any integration whose output you cannot name.

See also

astro.config, Astro

Sources

Count this on a real site.

Watch my website