Belajar Gatsby - Tooling Modern & Build Automation

#Pendahuluan

Build automation mengubah pekerjaan berulang menjadi proses yang dapat dijalankan mesin. Gatsby CLI, script npm, TypeScript, dan pipeline CI/CD membuat project tidak hanya berjalan hari ini, tetapi juga aman untuk diubah besok.

Episode 19 membahas Gatsby CLI dan package scripts, dukungan TypeScript di Gatsby, pipeline CI/CD, serta linting, formatting, dan pre-commit hooks.

#Gatsby CLI dan Package Scripts

#Perintah Dasar Gatsby CLI

Gatsby CLI menyediakan perintah untuk membuat project dan menjalankan siklus develop-build:

gatsby new situs-ku https://github.com/gatsbyjs/gatsby-starter-blog
gatsby develop
gatsby build
gatsby serve
gatsby clean

gatsby clean menghapus folder .cache dan public, berguna saat build tidak konsisten karena cache yang korup. gatsby develop menjalankan server development dengan live reload.

#Package Scripts yang Konsisten

Bungkus perintah CLI ke dalam script package.json agar semua anggota tim memakai perintah yang sama:

{
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  }
}

#TypeScript di Gatsby

#Konfigurasi TypeScript

Sejak Gatsby 4, file konfigurasi bisa ditulis dalam TypeScript. gatsby-config.ts, gatsby-node.ts, dan gatsby-browser.ts dikenali secara otomatis. Pastikan tsconfig.json menambahkan pengaturan yang diperlukan:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "bundler"
  }
}

"strict": true mengaktifkan seluruh pengecekan tipe ketat. Untuk jalur alias seperti import dari src/components, tambahkan paths pada tsconfig.

#Menulis Komponen Bertipe

Dengan TypeScript, props komponen didefinisikan sebagai interface sehingga error tipe terdeteksi sejak saat menulis kode:

Komponen dengan tipe props

interface ButtonProps {
  label: string
  variant: "primary" | "secondary"
}
 
const Button = ({ label, variant }: ButtonProps) => {
  return <button className={variant}>{label}</button>
}

#CI/CD Pipeline untuk Gatsby

#Workflow GitHub Actions

Pipeline CI paling sederhana menjalankan install, lint, test, dan build untuk setiap pull request:

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

npm ci melakukan instalasi deterministik berdasarkan lockfile, lebih cocok untuk CI daripada npm install. Caching folder .cache dan public mempercepat build berikutnya.

#Build yang Reproducible

Pastikan versi Node.js dan package manager disematkan agar hasil build konsisten antar mesin. Simpan nilai yang berubah antar lingkungan di environment variable, bukan di kode.

#Linting, Formatting, dan Pre-commit Hooks

#Prettier dan ESLint

Padukan ESLint untuk menemukan masalah dan Prettier untuk format. Keduanya tidak saling menggantikan: ESLint fokus pada aturan kode, Prettier fokus pada gaya penulisan.

#Husky dan lint-staged

Agar aturan ditegakkan sebelum kode masuk git, jalankan lint hanya pada file yang berubah dengan lint-staged:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

husky memasang git hook pre-commit yang memanggil lint-staged. File yang melanggar aturan tidak akan pernah sempat dikomit.

#Penutup

Inti yang harus dibawa pulang:

• gatsby clean mengatasi build yang tidak konsisten karena cache.
• Bungkus perintah CLI dalam script npm yang konsisten.
• File konfigurasi Gatsby bisa ditulis dalam TypeScript.
• CI menjalankan lint, test, dan build untuk setiap perubahan.
• npm ci dipakai untuk instalasi deterministik di CI.
• Husky dan lint-staged menegakkan aturan sebelum commit.

Di episode 20 selanjutnya kita akan membahas deployment dan hosting — opsi deploy Gatsby Cloud, Netlify, dan Vercel, build output dan preview, manajemen domain, serta CDN dan cache invalidation.