Svelte Deployment Build Adapter Static Node Vercel Netlify

Definisi

SvelteKit memakai adapter untuk menargetkan environment tertentu (Node, static, Vercel, Netlify, Cloudflare). vite build menghasilkan output sesuai adapter yang dipasang.

Kapan dipakai

Pilih adapter berdasar hosting:

• adapter-static: situs murni statis (tanpa server).
• adapter-node: jalan di server Node sendiri.
• adapter-vercel / adapter-netlify: deploy ke platform tersebut.

Cara kerja

Install adapter

bash

npm i -D @sveltejs/adapter-node

Konfigurasi

js

// svelte.config.js
import adapter from '@sveltejs/adapter-node';
export default {
  kit: { adapter: adapter() }
};

Build & jalan

bash

npm run build
node build/index.js   # adapter-node jalan di port 3000

Untuk static:

js

import adapter from '@sveltejs/adapter-static';
export default { kit: { adapter: adapter({ pages: 'build' }) } };

Struktur alur

Catatan implementasi

• Untuk adapter-static, semua halaman harus prerenderable; tambahkan export const prerender = true di root layout bila full static.
• adapter-node butuh PORT env; jalan sebagai proses biasa.
• Environment variables: jangan hardcode secret; pakai $env/static/private atau $env/dynamic/private.
• Pastikan fallback (SPA mode) di-set bila pakai routing client-side tanpa prerender.

Kesalahan umum

• Adapter tidak cocok hosting: build sukses tapi runtime error.
• Lupa prerender=true di static: halaman dinamis gagal saat build.
• Secret di client: pakai $env/static/public hanya untuk nilai aman.
• Port bentrok: adapter-node default 3000, ganti lewat env.

Referensi terkait

• Svelte Routing dengan SvelteKit
• Next.js Environment Variables, Runtime, Deployment
• Laravel Deployment konsep