Astro project structure

Astro project structure

Explorer

  • .huskynew
  • pre-commitnew
  • commit-msgnew
  • .vscode
  • extensions.json
  • launch.json
  • settings.jsonnew
  • .astro…, not committed
  • dist…, not committed
  • node_modules…, not committed
  • coverage…new, not committed
  • docsnew
  • content-guide.mdnew
  • public
  • favicon.svg
  • favicon.ico
  • robots.txtnew
  • og-default.pngnew
  • scriptsnew
  • new-post.mjsnew
  • src
  • consts.ts
  • content.config.ts
  • middleware.tsnew
  • testsnew
  • .envnew, not committed
  • .env.examplenew
  • .gitignore
  • .nvmrcnew
  • .prettierrc.mjsnew
  • AGENTS.md
  • CLAUDE.md
  • README.md
  • astro.config.mjs
  • commitlint.config.jsnew
  • drizzlenew
  • 0000_initial.sqlnew
  • meta…new
  • drizzle.config.tsnew
  • eslint.config.jsnew
  • package-lock.json
  • package.json
  • tsconfig.json
  • vitest.config.tsnew

  1. # Create the project from the blog template, install and init git

    npm create astro@latest my-site -- --template blog --install --git

  2. # Start the dev server on localhost:4321

    cd my-site && npm run dev

  3. # Add React islands, the Node adapter and type checking

    npx astro add react node && npm install -D @astrojs/check typescript@6

  4. # Add tests and formatting

    npm install -D vitest @playwright/test prettier prettier-plugin-astro eslint eslint-plugin-astro && npx playwright install

  5. # Add the database and search

    npm install drizzle-orm && npm install -D drizzle-kit pagefind