Belajar Svelte - Configuration & Environment

#Pendahuluan

Aplikasi yang sama dijalankan di banyak lingkungan: mesin developer, server staging, dan server produksi. Masing-masing punya alamat API, kunci integrasi, dan perilaku yang berbeda. Menulis nilai-nilai itu langsung di kode adalah resep bencana — satu commit salah, dan secret bocor ke publik.

Solusinya adalah konfigurasi berbasis environment: nilai dikeluarkan dari kode, diletakkan di environment variables, dan dibaca saat aplikasi berjalan. SvelteKit menyediakan modul khusus untuk ini, dengan batasan yang jelas antara variabel yang boleh tampil di browser dan yang hanya untuk server.

Episode ini membahas environment variables dan runtime config, pengaturan Vite dan SvelteKit, manajemen aset dan static files, serta feature flags dan setup multi-environment. Setelah selesai, kalian bisa membangun aplikasi yang berperilaku berbeda di tiap lingkungan tanpa mengubah satu baris kode.

#Environment Variables dan Runtime Config

#Mengenal Modul $env

SvelteKit mengekspos environment variables lewat modul $env — bukan process.env langsung. Modul ini memisahkan variabel berdasarkan visibilitasnya:

Membaca env untuk publik dan server

import { PUBLIC_API_URL } from "$env/static/public"
import { DATABASE_URL } from "$env/static/private"

$env/static/public hanya berisi variabel ber-prefix PUBLIC_ — aman dikirim ke browser. $env/static/private hanya tersedia di server dan berisi secret seperti koneksi database. Memaksa kalian menamai variabel dengan eksplisit adalah fitur keamanan, bukan sekadar aturan gaya.

#Menetapkan Variabel Lingkungan

File .env di akar proyek mendefinisikan variabel lokal. Jangan pernah meng-commit file ini:

Contoh file .env

PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgres://user:pass@db:5432/app
FLAG_THEME_BARU=true

PUBLIC_API_URL akan terlihat di browser, sedangkan DATABASE_URL hanya untuk server. File .env.example yang aman untuk di-commit berisi versi kosong sebagai dokumentasi. Saat deploy, nilai diisi dari panel penyedia hosting atau CI/CD — tidak pernah dari repository.

#Konfigurasi Vite dan SvelteKit

#svelte.config.js

Konfigurasi utama aplikasi SvelteKit ada di svelte.config.js. Kalian bisa menambah preprocessor, alias path, dan pengaturan kit:

svelte.config.js dengan alias

import adapter from "@sveltejs/adapter-node"
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
 
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    alias: {
      "@lib": "./src/lib",
    },
  },
}
 
export default config

adapter() menentukan target deployment — adapter-node untuk server Node, adapter-vercel untuk Vercel. alias memungkinkan import singkat seperti @lib/stores.js. Konfigurasi ini dijelaskan lengkap di episode 20 tentang deployment.

#vite.config.ts

Vite menangani bundling dan dev server. Konfigurasi tambahan ditulis di vite.config.ts:

vite.config.ts dengan plugin

import { sveltekit } from "@sveltejs/kit/vite"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [sveltekit()],
  server: {
    port: 5173,
    proxy: {
      "/api": "http://localhost:8080",
    },
  },
})

server.proxy meneruskan request /api ke server backend lain selama development — kalian tidak perlu mengaktifkan CORS di backend. Konfigurasi build seperti build.target dan build.minify juga diatur di sini untuk menyesuaikan output produksi.

#Asset Management dan Static Files

#Folder Static

File di folder static disajikan langsung di akar URL tanpa diproses Vite:

Asset statis di folder static

static/
├── favicon.png        # /favicon.png
├── robots.txt         # /robots.txt
└── logo.svg           # /logo.svg

static/favicon.png bisa direferensikan sebagai /favicon.png di markup. Folder ini untuk aset yang tidak berubah dan tidak butuh optimasi: favicon, robots.txt, sertifikat, dan file yang direferensikan dari luar. Jangan letakkan aset yang diimport oleh komponen di sini — itu tugas pipeline Vite.

#Import Aset Melalui Vite

Untuk aset yang diolah — minifikasi, hash, optimasi — import langsung di kode:

Import aset lewat pipeline Vite

<script>
  import logo from "$lib/assets/logo.svg"
</script>
 
<img src={logo} alt="Logo perusahaan" />

import logo from "$lib/assets/logo.svg" membuat Vite memproses file, menghasilkan URL dengan hash konten yang optimal untuk caching. Berbeda dengan folder static, aset yang diimport ikut di-bundle dan di-optimasi — pilihan tepat untuk gambar yang dipakai komponen.

#Feature Flags dan Multi-Environment

#Feature Flag Sederhana

Feature flags memungkinkan kalian mengaktifkan fitur baru di sebagian lingkungan tanpa deploy terpisah:

Feature flag dari environment

import { env } from "$env/dynamic/private"
 
export const fiturTemaBaru = env.FLAG_THEMA_BARU === "true"

$env/dynamic/private membaca variabel saat runtime, bukan saat build — cocok untuk nilai yang berubah tanpa rebuild. env.FLAG_THEMA_BARU === "true" mengubah string env menjadi boolean. Guarding fitur dengan flag membuat rilis bertahap menjadi aman dan bisa di-revert instan.

#Multi-Environment Setup

Pola yang umum: tiga lingkungan dengan nilai berbeda:

Variabel berbeda per lingkungan

# development (.env)
PUBLIC_API_URL=http://localhost:8080
# production (panel hosting)
PUBLIC_API_URL=https://api.example.com

PUBLIC_API_URL berisi URL backend lokal saat development dan URL produksi saat deploy. Kode tidak pernah berubah — hanya nilainya. Ditambah logging yang lebih banyak di development dan error tracking yang aktif di produksi, kalian mendapat satu kode dengan perilaku yang tepat di setiap lingkungan.

#Penutup

Inti yang harus dibawa pulang:

Gunakan modul $env SvelteKit, bukan process.env, agar visibilitas secret jelas.
Prefix PUBLIC_ untuk variabel yang boleh tampil di browser; sisanya tetap di server.
Jangan commit file .env; sediakan .env.example sebagai dokumentasi.
svelte.config.js mengatur adapter dan alias; vite.config.ts mengatur plugin dan proxy.
Folder static untuk aset mentah; import lewat Vite untuk aset yang dioptimasi.
Feature flags dari env memungkinkan rilis bertahap tanpa mengubah kode.

Di episode 12 selanjutnya kita akan membahas authentication dan authorization — pola auth di SvelteKit, session management dan secure cookies, protected routes dan route guards, serta role-based access control dan auth di sisi klien dan server. Environment variables dari episode ini akan menyimpan rahasia yang melindungi session.