Astro Cheat Sheet
Practical Astro cheat sheet with setup steps, core workflows, debugging, and copy-paste examples.
astro framework web-dev deployment
Astro cheat sheet with real commands and snippets for setup, core workflows, debugging, and production-safe automation patterns. If you are working across tools, pair this with the Next.js Cheat Sheet and React Cheat Sheet.
Setup and Installation
Goal: Create a fresh project
# Scaffold project using official starter
npm create astro@latest my-astro-site
# Install dependencies after scaffold completes
cd my-astro-site && npm install
Goal: Verify local toolchain versions
# Print Node.js runtime version
node --version
# Print npm version for lockfile consistency
npm --version
# Inspect package scripts in project
cat package.json | rg "scripts" -n
Core Development Workflow
Goal: Run local development server
# Start framework dev server with hot reload
npm run dev
# Check local endpoint health
curl -I http://localhost:3000 || curl -I http://localhost:5173 || true
Goal: Build and preview production output
# Build optimized production assets
npm run build
# Run production preview server
npm run preview
Goal: Implement a core feature snippet
---
const name = 'DevCheatSheets';
---
<main>
<h1>Hello, {name}</h1>
<p>Fast content site with Astro components.</p>
</main>
Testing and Quality
Goal: Run tests and static checks
# Execute project tests
npm run check
# Run type checking when available
npm run check || npx tsc --noEmit || true
# Run linting for fast feedback
npm run lint || true
Deployment and Operations
Goal: Prepare deployment artifacts
# Create production build before deployment
npm run build
# Validate environment variables are set
node -e "console.log('NODE_ENV=', process.env.NODE_ENV || 'unset')"
# Smoke-test production route after deploy
curl -I https://devcheatsheets.com
Debugging and Troubleshooting
Goal: Inspect build and runtime failures
# Reinstall dependencies from lockfile
rm -rf node_modules && npm ci
# Re-run build with clean cache
npm run build
# Search source for suspect route/config patterns
rg "route|middleware|config" src app -n
Common Gotchas
- Run Astro builds locally before shipping to CI/CD environments.
- Keep environment secrets outside the repository and load them per environment.
- Avoid stale dependency locks by using npm ci in automation.
- Validate route and middleware behavior with explicit smoke tests.
- Keep framework and plugin versions aligned to avoid build regressions.
Related Sheets
- Next.js Cheat Sheet — daily Next.js commands and production-ready examples.
- React Cheat Sheet — component-driven UI development patterns.
- Tailwind CSS Cheat Sheet — daily Tailwind CSS commands and production-ready examples.
Related Cheat Sheets
React Cheat Sheet
Practical React cheat sheet with setup steps, core workflows, debugging, and copy-paste examples.
Next.js Cheat Sheet
Practical Next.js cheat sheet with setup steps, core workflows, debugging, and copy-paste examples.
Tailwind CSS Cheat Sheet
Practical Tailwind CSS cheat sheet with setup steps, core workflows, debugging, and copy-paste examples.