Pipelines GitHub Actions untuk SvelteKit optimalkan kecepatan feedback dengan menjalankan linting, pengecekan tipe, dan preview build setiap pull request. Tujuannya memastikan tim tidak melewatkan masalah lint atau type di awal, lalu memberikan akses cepat ke artefak preview tanpa menunggu merge.

Artikel ini menjelaskan struktur workflow yang konsisten dengan kebutuhan SvelteKit, termasuk konfigurasi job utama, strategi matrix adapter target, dan pendekatan praktis untuk menyiapkan preview environment sementara.

Mengapa linting, type checking, dan preview penting di pipeline SvelteKit

Linting menjaga konsistensi gaya, type checking menangkap regresi tipe dari perubahan framework, dan preview build membantu reviewer melihat hasil nyata sebelum merge. Tanpa automation ini, tim mengandalkan pengujian manual yang lambat dan rentan lupa menjalankan npm run lint atau npm run typecheck.

Dengan pipeline yang dijalankan otomatis saat PR terbuka, deteksi error bisa dilaporkan dalam konteks repository, memudahkan debugging awal, dan menghindari devolpers mengandalkan environment lokal yang tidak sama dengan CI.

Membangun workflow GitHub Actions untuk lint & type check

Workflow utama cukup fokus pada job yang menjalankan script standar SvelteKit:

name: CI Pipeline
on:
  pull_request:
    branches: [main]

jobs:
  checks:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Run lint
        run: npm run lint
      - name: Run type check
        run: npm run typecheck

Beberapa hal yang perlu diperhatikan:

  • Gunakan actions/setup-node dengan opsi cache untuk mempercepat install, tapi pastikan package-lock.json konsisten.
  • Berikan nama yang eksplisit untuk setiap step agar log mudah dipindai ketika ada kegagalan.
  • Jangan gabungkan lint dan type check dalam satu perintah agar log error terpisah dan mudah dibagikan ke reviewer.

Strategi matrix adapter target

SvelteKit mendukung berbagai adapter (Static, Node, Cloudflare, dll). Untuk memastikan perubahan kompatibel pada target berbeda, jalankan job lint/typecheck dengan matrix versi adapter jika project anda menyertakan adapter khusus di build step.

Contoh matrix sederhana:

checks:
  strategy:
    matrix:
      adapter: [node, vercel]
  steps:
    - name: Setup adapter-specific config
      run: npm run set-adapter -- ${matrix.adapter}
    - name: Build
      run: npm run build

Nilai matrix dapat digunakan untuk mengatur environment variable atau skrip per adapter. Jika adapter tertentu membutuhkan credentials (misalnya Vercel), pertimbangkan job terpisah dengan secret yang dibatasi.

Menyiapkan preview build PR ketika perlu validasi visual

Preview build membantu reviewer Q/A tanpa harus checkout manual. Pilihan implementasi umum:

  • Mengupload artifact hasil npm run build dan menjalankan server preview on-demand dengan script terpisah di runner yang sama.
  • Mendeploy ke environment sementara (misalnya Firebase Hosting Preview Channel, Netlify Deploy Preview) dengan GitHub Actions resmi adapter.

Contoh job untuk menyimpan hasil build sebagai artifact:

preview:
  needs: checks
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: 20
    - run: npm ci
    - run: npm run build
    - name: Upload preview artifact
      uses: actions/upload-artifact@v4
      with:
        name: sveltekit-preview-${{ github.run_id }}
        path: build/

Dengan artifact ini, tim QA bisa mendownload build, menjalankan npm run preview -- --port 4173, dan mengecek hasil. Jika ingin automasi lebih lanjut, script tambahan dapat menjalankan server preview di runner publik (misalnya dengan self-hosted runner) dan mengupdate comment PR dengan link preview.

Deteksi error, notifikasi, dan monitoring runtime

Agar pipeline lebih berguna:

  • Gunakan status checks di branch protection agar PR tidak bisa merge sampai semua job succeed.
  • Tambahkan notifikasi ke Slack/Teams menggunakan action seperti rtCamp/action-slack-notify atau comment langsung ke PR dengan actions/github-script ketika job gagal.
  • Gunakan badge workflow di README untuk memberi gambaran status CI secara real-time.
  • Catat artifact log build (misalnya upload log file jika lint menghasilkan banyak output) agar review bug lebih cepat.

Untuk debugging, periksa console log setiap step. Jika job lint/typecheck fail tanpa info cukup, tambahkan opsi verbose atau output file ke artifacts sehingga log bisa ikut dicatat.

Ringkasan manfaat

Dengan pipeline GitHub Actions yang berfokus pada lint, type check, dan preview untuk SvelteKit, tim mendapatkan feedback cepat, menghindari regressi tipe, dan memiliki bukti preview setiap PR. Matrix adapter menjaga kompatibilitas lintas target, sementara preview artifact mempercepat review visual. Deteksi error, notifikasi, dan monitoring membuat maintenance pipeline lebih mulus.

Untuk referensi lanjutan, lihat dokumentasi resmi SvelteKit dan GitHub Actions.