A reference for the Astro series. Each group links to the chapter that explains it.
CLI
| Command | Purpose |
|---|---|
npm create astro@latest |
Scaffold a new project |
npm run dev |
Dev server on port 4321 |
npm run build |
Build to dist/ |
npm run preview |
Serve the production build locally |
npx astro check |
Type-check .astro files |
npx astro add react |
Install and configure an integration |
npx astro sync |
Regenerate content and env types |
See Creating an Astro project.
Special files
| Path | Role |
|---|---|
src/pages/ |
Routes |
public/ |
Copied unchanged |
src/content.config.ts |
Content collections |
src/middleware.ts |
Runs before rendering |
src/actions/index.ts |
Server actions |
astro.config.mjs |
Configuration |
Component syntax
| Syntax | Purpose |
|---|---|
--- … --- |
Component script (server only) |
{expression} |
Escaped expression |
Astro.props |
Component props |
<slot />, <slot name="x" /> |
Default and named slots |
slot="x" |
Fill a named slot |
class:list={[...]} |
Build a class string |
set:html={html} |
Insert raw HTML |
<style> |
Scoped CSS |
<style is:global> |
Global CSS |
define:vars={{ ... }} |
Server values as CSS variables |
<script> |
Bundled client script, once per page |
<script is:inline> |
Unprocessed script |
See Astro components.
Hydration directives
| Directive | Hydrates |
|---|---|
client:load |
Immediately |
client:idle |
When the browser is idle |
client:visible |
When scrolled into view |
client:media="(query)" |
When a media query matches |
client:only="react" |
Browser only, no server HTML |
server:defer |
Server island, rendered after the page |
transition:name, transition:persist |
View transition naming and persistence |
See Islands and client directives in Astro.
Routing
| File | Matches |
|---|---|
pages/about.astro |
/about/ |
pages/blog/[slug].astro |
/blog/anything/ |
pages/docs/[...path].astro |
/docs/, /docs/a/b/ |
pages/feed.xml.ts |
Endpoint at /feed.xml |
pages/404.astro |
Not-found page |
pages/_hidden.astro |
Ignored (underscore) |
| API | Purpose |
|---|---|
getStaticPaths() |
List params for static dynamic routes |
export const prerender = false |
Render this route on demand |
Astro.params, Astro.url |
Route and URL data |
Astro.redirect('/path/') |
Redirect from an on-demand page |
See Routing in Astro and Server rendering in Astro.
Content collections
| Function | Purpose |
|---|---|
defineCollection({ loader, schema }) |
Declare a collection |
glob({ pattern, base }) |
Load many files |
file('path.json') |
Load entries from one file |
getCollection('name', filter) |
All matching entries |
getEntry('name', id) |
One entry |
render(entry) |
Content component and headings |
reference('name') |
Typed link to another collection |