Learning Astro - Modern Tooling & Build Automation

#Introduction

Consistent code quality cannot rely on human discipline alone — it must be automated. Episode 19 covers modern tooling and build automation for Astro projects: the CLI commands you use often, strict TypeScript, CI/CD pipelines, and linting and formatting that run automatically before code gets merged.

The end goal of this episode: a flow where every code change is automatically checked, tested, and built by machines. Humans focus on logic, not on things a computer can check.

This episode also lays the foundation for the automated deployment covered in episode 20.

#The Astro CLI and Vite

#CLI Commands You Must Know

The Astro CLI provides the core commands used every day:

npm run dev        # dev server dengan HMR
npm run build      # build produksi ke dist/
npm run preview    # melayani hasil build
npx astro check    # type check project
npx astro sync     # generate tipe untuk collections

npx astro sync generates type files for content collections and components — run it after changing a collection schema so the editor recognizes the new types.

#Vite Under the Hood

All the commands above run on top of Vite. Vite is responsible for bundling, the dev server, and file transforms. That is why Vite configuration can also be adjusted from astro.config.mjs through the vite property:

Konfigurasi Vite dari astro.config

export default defineConfig({
  vite: {
    build: {
      sourcemap: true,
    },
  },
});

The build.sourcemap option generates source maps for production debugging. Vite configuration stays in one door with Astro.

#TypeScript Integration and Strict Typing

#Automatic Type Checking

npx astro check checks the whole project, including .astro files. Add it to the package.json scripts and run it routinely:

{
  "scripts": {
    "typecheck": "astro check"
  }
}

The command npm run typecheck is now ready to be called anywhere — locally or in CI.

#Using Generated Types

The .astro/types.d.ts file contains types generated from collections. Use these types in functions and components:

Memakai tipe generated

import type { CollectionEntry } from "astro:content";
 
function formatJudul(artikel: CollectionEntry<"blog">): string {
  return artikel.data.title;
}

CollectionEntry<"blog"> gives full typing for a collection entry — the editor will warn you if you access the wrong field.

#CI/CD Pipelines for Astro Projects

#A Simple Pipeline with GitHub Actions

CI/CD makes build, test, and deploy run automatically on every push. Example GitHub Actions workflow:

name: CI
on:
  push:
    branches: [main]
  pull_request:
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npm run typecheck
      - run: npm run lint
      - run: npm run build

This workflow runs install, type check, lint, and build on every push and pull request. If any of them fails, no deploy happens.

#Storing Secrets in CI

The environment variables from episode 8 are injected into the pipeline through CI secrets:

env:
  PUBLIC_API_URL: ${{ secrets.PUBLIC_API_URL }}

${{ secrets.PUBLIC_API_URL }} reads the value from the repository secrets — it never appears in logs.

#Linting, Formatting, and Pre-commit Hooks

#ESLint and Prettier in CI

Add lint and format to the pipeline so all code stays consistent:

npm run lint
npx prettier --check .

npx prettier --check . makes sure all files are formatted — no more debating code style in code reviews.

#Husky for Pre-commit Hooks

To catch errors earlier, install pre-commit hooks with Husky:

npm install -D husky
npx husky init

After init, create a hook in .husky/pre-commit that runs lint and format only on the changed files. Errors are rejected before the commit is created — the fastest feedback loop.

#Conclusion

Episode 19 brings together modern tooling and automation: the Astro CLI commands and Vite configuration, strict TypeScript with generated types, CI/CD pipelines with GitHub Actions, and linting, formatting, and pre-commit hooks with Husky.

The key takeaways:

• astro sync, astro check, and astro build are core commands.
• Vite configuration can be injected through the vite property.
• npx astro check checks types across the whole project.
• GitHub Actions runs typecheck, lint, and build automatically.
• Secrets are injected into the pipeline through secrets.*.
• Husky enforces lint and format before committing.

In the next episode 20, we will cover deployment and hosting: deployment options like Vercel, Netlify, Cloudflare Pages, and Astro Cloud, static versus SSR deployment, build output and cache configuration, and production-ready deployment workflows. Your site is ready to be seen by the world.