Astro Usage Guide

Always consult docs.astro.build for code examples and latest API.

Astro is the web framework for content-driven websites.

Quick Reference

File Location

CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in: ./. Use --config for custom path.

CLI Commands

• npx astro dev - Start the development server.
• npx astro build - Build your project and write it to disk.
• npx astro check - Check your project for errors.
• npx astro add - Add an integration.
• npmx astro sync - Generate TypeScript types for all Astro modules.

Re-run after adding/changing plugins.

Project Structure

Astro leverages an opinionated folder layout for your project. Every Astro project root should include some directories and files. Reference project structure docs.

• src/* - Your project source code (components, pages, styles, images, etc.)
• src/pages - Required sub-directory in your Astro project. Without it, your site will have no pages or routes!
• src/components - It is common to group and organize all of your project components together in this folder. This is a common convention in Astro projects, but it is not required. Feel free to organize your components however you like!
• src/layouts - Just like src/components, this directory is a common convention but not required.
• src/styles - It is a common convention to store your CSS or Sass files here, but this is not required. As long as your styles live somewhere in the src/ directory and are imported correctly, Astro will handle and optimize them.
• public/* - Your non-code, unprocessed assets (fonts, icons, etc.). The files in this folder will be copied into the build folder untouched, and then your site will be built.
• package.json - A project manifest.
• astro.config.{js,mjs,cjs,ts} - An Astro configuration file. (recommended)
• tsconfig.json - A TypeScript configuration file. (recommended)

Core Config Options

Adapters

Deploy to your favorite server, serverless, or edge host with build adapters. Use an adapter to enable on-demand rendering in your Astro project.

Add Node.js adapter using astro add:

npx astro add node --yes

Add Cloudflare adapter using astro add:

npx astro add cloudflare --yes

Add Netlify adapter using astro add:

npx astro add netlify --yes

Add Vercel adapter using astro add:

npx astro add vercel --yes

Other Community adapters

Resources

• Docs
• Config Reference
• llms.txt
• GitHub