Belajar Astro - Tooling Modern & Build Automation

#Pendahuluan

Kualitas kode yang konsisten tidak bisa diandalkan pada kedisiplinan manusia semata — harus diotomatiskan. Episode 19 ini membahas tooling modern dan build automation untuk project Astro: perintah CLI yang sering dipakai, TypeScript yang ketat, pipeline CI/CD, serta linting dan formatting yang berjalan otomatis sebelum kode masuk.

Tujuan akhir episode ini: sebuah alur di mana setiap perubahan kode otomatis diperiksa, diuji, dan di-build oleh mesin. Manusia tinggal fokus pada logika, bukan pada hal-hal yang bisa dicek komputer.

Episode ini juga menyiapkan fondasi untuk deployment otomatis yang akan dibahas di episode 20.

#Astro CLI dan Vite

#Perintah CLI yang Wajib Dikenal

Astro CLI menyediakan perintah inti yang dipakai setiap hari:

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 menghasilkan file tipe untuk content collections dan komponen — jalankan setelah mengubah schema collection agar editor mengenali tipe baru.

#Vite di Balik Layar

Semua perintah di atas dijalankan di atas Vite. Vite bertanggung jawab atas bundling, dev server, dan transformasi file. Karena itu konfigurasi Vite juga bisa disesuaikan dari astro.config.mjs melalui properti vite:

Konfigurasi Vite dari astro.config

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

Opsi build.sourcemap menghasilkan source map untuk debugging produksi. Konfigurasi Vite tetap satu pintu dengan Astro.

#TypeScript Integration dan Strict Typing

#Type Check Otomatis

npx astro check memeriksa seluruh project, termasuk file .astro. Tambahkan ke script package.json dan jalankan rutin:

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

Perintah npm run typecheck sekarang siap dipanggil di mana saja — lokal maupun CI.

#Memanfaatkan Tipe Generated

File .astro/types.d.ts berisi tipe yang di-generate dari collection. Gunakan tipe ini di fungsi dan komponen:

Memakai tipe generated

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

CollectionEntry<"blog"> memberi tipe lengkap entry collection — editor akan mengingatkan jika field yang diakses salah.

#CI/CD Pipeline untuk Astro Projects

#Pipeline Sederhana dengan GitHub Actions

CI/CD membuat build, test, dan deploy berjalan otomatis setiap push. Contoh workflow GitHub Actions:

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

Workflow ini menjalankan install, type check, lint, dan build di setiap push dan pull request. Jika salah satu gagal, deploy tidak terjadi.

#Menyimpan Secret di CI

Environment variables dari episode 8 disuntikkan ke pipeline melalui secret CI:

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

${{ secrets.PUBLIC_API_URL }} membaca nilai dari secret repository — tidak pernah tampil di log.

#Linting, Formatting, dan Pre-commit Hooks

#ESLint dan Prettier di CI

Tambahkan lint dan format ke pipeline agar semua kode konsisten:

npm run lint
npx prettier --check .

npx prettier --check . memastikan semua file sudah terformat — tidak perlu membahas gaya kode di code review lagi.

#Husky untuk Pre-commit Hooks

Agar kesalahan terdeteksi lebih awal, pasang pre-commit hooks dengan Husky:

npm install -D husky
npx husky init

Setelah init, buat hook di .husky/pre-commit yang menjalankan lint dan format hanya pada file yang diubah. Kesalahan ditolak sebelum commit dibuat — siklus feedback paling cepat.

#Penutup

Episode 19 menyatukan tooling modern dan otomasi: perintah Astro CLI dan konfigurasi Vite, TypeScript strict dengan tipe generated, pipeline CI/CD dengan GitHub Actions, serta linting, formatting, dan pre-commit hooks dengan Husky.

Inti yang harus dibawa pulang:

• astro sync, astro check, dan astro build adalah perintah inti.
• Konfigurasi Vite bisa disuntikkan lewat properti vite.
• npx astro check memeriksa tipe seluruh project.
• GitHub Actions menjalankan typecheck, lint, dan build otomatis.
• Secret disuntikkan ke pipeline lewat secrets.*.
• Husky menegakkan lint dan format sebelum commit.

Di episode 20 selanjutnya kita akan membahas deployment dan hosting: opsi deploy seperti Vercel, Netlify, Cloudflare Pages, dan Astro Cloud, deploy statis versus SSR, konfigurasi build output dan cache, serta workflow deployment yang siap produksi. Situs kalian siap dilihat dunia.