Belajar SvelteKit - Configuration & Runtime Config

#Pendahuluan

Aplikasi yang baik berjalan dengan konfigurasi yang jelas: berapa banyak yang boleh di-prerender, di platform mana ia di-deploy, dan bagaimana ia membedakan environment development dari production. Episode 8 membahas lapisan konfigurasi SvelteKit secara menyeluruh.

Satu aplikasi harus bisa berjalan di mesin lokal, di staging, dan di production tanpa mengubah kode. Kuncinya adalah memisahkan nilai konfigurasi dari logika, dan memilih level visibilitas yang tepat untuk setiap nilai — sebagian aman dibuka ke browser, sebagian hanya untuk server.

Setelah episode ini, kalian akan memahami peran setiap file konfigurasi, cara memakai environment variables tanpa membocorkan secret, dan bagaimana adapters menentukan bentuk output build.

#svelte.config.js dan Runtime Configuration

#Pusat Konfigurasi SvelteKit

File svelte.config.js adalah gerbang utama konfigurasi. Semua opsi kit didefinisikan di sini: adapter, alias, prerender, csrf, env, dan lainnya.

svelte.config.js lengkap

import adapter from "@sveltejs/adapter-node";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter(),
        alias: {
            "@komponen": "src/lib/components"
        },
        prerender: {
            concurrency: 4,
            crawl: true
        }
    }
};
 
export default config;

Opsi kit.alias menambahkan path alias yang tersedia di seluruh proyek, mirip $lib tetapi dengan nama bebas. Opsi kit.prerender mengatur perilaku static generation, termasuk jumlah concurrency saat crawling.

#Konfigurasi Runtime dan Per-Route

Selain konfigurasi global, SvelteKit mendukung konfigurasi per-route lewat ekspor dari file route: export const prerender = true, export const ssr = false, atau export const csr = false. Nilai di level route menimpa konfigurasi global, memberi kontrol halus halaman demi halaman.

#Environment Variables dan Modul $env

#Tiga Jenis Visibilitas

SvelteKit menyediakan modul khusus untuk environment variables. Akses lewat modul ini — bukan process.env langsung — supaya penggantian dilakukan dengan aman saat build.

Membaca environment variables

import { API_KEY } from "$env/static/private";
import { PUBLIC_BASE_URL } from "$env/static/public";
import { env } from "$env/dynamic/private";
 
export const load = async () => {
    return {
        keyTersedia: Boolean(API_KEY),
        baseUrl: PUBLIC_BASE_URL,
        port: env.PORT
    };
};

• $env/static/private — dibaca saat build, hanya di server.
• $env/static/public — dibaca saat build, aman untuk browser.
• $env/dynamic/private — dibaca saat runtime, hanya di server.
• $env/dynamic/public — dibaca saat runtime, aman untuk browser.

#Aturan Penting

Variabel publik harus diawali PUBLIC_ agar bisa diakses dari modul public. Variabel privat yang di-import ke kode client akan menyebabkan error saat build — perlindungan bawaan SvelteKit agar secret tidak terkirim ke browser. Simpan nilai asli di file .env dan .env.example, lalu biarkan .env ter-ignore oleh git.

#Adapters dan Deployment Targets

#Peran Adapter

Adapter menentukan bentuk output build: file statis, server Node, fungsi serverless, atau worker edge. SvelteKit menghasilkan kode yang sama, dan adapter menyesuaikan output dengan platform tujuan.

npm install -D @sveltejs/adapter-vercel

Kemudian ubah svelte.config.js untuk memakai adapter tersebut. Adapter yang umum:

• adapter-auto — memilih otomatis berdasarkan environment.
• adapter-node — server Node mandiri untuk self-host atau Docker.
• adapter-vercel — fungsi serverless dan edge di Vercel.
• adapter-netlify — fungsi Netlify.
• adapter-cloudflare — Cloudflare Pages dan Workers.

Pilihan adapter memengaruhi fitur yang tersedia, misalnya ISR di Vercel atau caching edge di Cloudflare. Pilih adapter sebelum memutuskan arsitektur deployment kalian.

#Feature Flags dan Build Environment

#Perbedaan Build dengan Variabel

Variabel statis di-inline saat build: nilai PUBLIC_ dibekukan ke dalam bundle. Dengan begitu, build yang berbeda — development, staging, production — bisa dihasilkan dari variabel yang berbeda tanpa mengubah kode.

PUBLIC_FEATURE_AI=true npm run build
PUBLIC_FEATURE_AI=false npm run build

#Strategi Feature Flags

Untuk memutuskan fitur aktif tanpa menulis branch di banyak tempat, kumpulkan flags dalam satu modul konfigurasi:

Modul feature flags

import { env } from "$env/dynamic/private";
 
export const flags = {
    aiSearch: env.FEATURE_AI_SEARCH === "true",
    darkMode: env.FEATURE_DARK_MODE !== "false"
};

Feature flags menjaga keputusan aktif/tidaknya fitur di satu tempat. Untuk perubahan yang harus terjadi tanpa rebuild, gunakan $env/dynamic yang dibaca saat runtime. Untuk nilai yang aman dibuka ke client, gunakan prefix PUBLIC_ dengan modul dynamic versi public.

#Penutup

Inti yang harus dibawa pulang:

• svelte.config.js mengatur adapter, alias, dan opsi kit secara terpusat; ekspor per-route memberi kontrol halus.
• Modul $env menyediakan akses environment variables dengan visibilitas statis atau dinamis, publik atau privat.
• Variabel privat yang di-import ke client akan digagalkan oleh SvelteKit saat build.
• Adapter menentukan bentuk output dan platform deployment; pilih sebelum menentukan arsitektur.
• Variabel PUBLIC_ di-inline saat build dan bisa membedakan environment tanpa mengubah kode.
• Feature flags terpusat membuat keputusan aktif fitur mudah dikelola dan diaudit.

Di episode 9 selanjutnya kita membahas assets, images & static content: static assets di direktori static, image optimization dan responsive images, content sourcing dari Markdown dan MDX, serta caching dan build-time optimizations.