The Astro docs (which are incredible, btw) have a reference project structure.
Inside of the project, you'll see the following structure:
/
├── public/
| ├── favicon.svg
│ └── robots.txt
├── src
│ ├── assets
│ │ └── images
│ ├── content
│ │ └── posts
│ ├── components
| | ├── heading
│ │ └── etc
│ │ layouts
| | ├── base.astro
│ │ └── layout.astro
│ ├── pages
│ │ ├── posts
│ │ └── etc
│ ├── styles
│ │ ├── global.css
│ │ └── etc
│ ├── utils
│ │ ├── content.ts
│ │ └── etc
| └── content.config.ts
└── package.json
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro -- --help |
Get help using the Astro CLI |
pnpm format:check |
Check file formatting with Prettier |
pnpm format |
Fix file formatting with Prettier |
pnpm lint |
Check for linting errors with ESLint |
pnpm lint:fix |
Fix linting errors with ESLint |
Astro has an Astro Docs MCP that is available. It is helpful to connect to Cursor, Claude Code, etc when developing this application.
See the Astro docs for more information on setting up Typescript.
See the Astro docs for more information on setting up ESLint. Plugin information: eslint-plugin-astro.
See the Astro docs for more information on setting up Prettier.