SvelteKit: Full-Stack Svelte

# Membuat proyek SvelteKit baru
npm create svelte@latest my-svelte-app

# Wizard akan menanyakan:
# 1. Template: Skeleton project / Demo app / Library
# 2. TypeScript: Yes / No
# 3. ESLint: Yes / No
# 4. Prettier: Yes / No
# 5. Playwright (testing): Yes / No

# Masuk ke direktori
cd my-svelte-app

# Install dependencies
npm install

# Jalankan development server
npm run dev

# Output:
#   VITE v5.x  ready in 300 ms
#   ➜  Local:   http://localhost:5173/

my-svelte-app/
├── src/
│   ├── lib/                    ← Shared library (auto-imported $lib)
│   │   ├── components/         ← Reusable components
│   │   │   ├── Header.svelte
│   │   │   ├── Footer.svelte
│   │   │   └── Card.svelte
│   │   ├── server/             ← Server-only code ($lib/server)
│   │   │   └── db.js
│   │   └── utils/              ← Utility functions
│   │       └── format.js
│   ├── routes/                 ← File-based routing
│   │   ├── +page.svelte        ← / (home page)
│   │   ├── +layout.svelte      ← Root layout
│   │   ├── about/
│   │   │   └── +page.svelte    ← /about
│   │   └── blog/
│   │       ├── +page.svelte    ← /blog
│   │       └── [slug]/
│   │           ├── +page.svelte         ← /blog/:slug
│   │           ├── +page.server.js      ← Server load + actions
│   │           └── +error.svelte        ← Error page
│   ├── app.html                ← HTML template
│   └── app.d.ts                ← TypeScript declarations
├── static/                     ← Static files (tidak diproses)
│   └── favicon.png
├── svelte.config.js            ← Konfigurasi SvelteKit
├── vite.config.js              ← Konfigurasi Vite
├── package.json
└── tsconfig.json

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Preprocess — support untuk TypeScript, PostCSS, dll
  preprocess: vitePreprocess(),

  kit: {
    // Adapter menentukan target deployment
    // adapter-auto mendeteksi platform otomatis
    adapter: adapter(),

    // Alias untuk import paths
    alias: {
      '$components': 'src/lib/components',
      '$utils': 'src/lib/utils'
    }
  }
};

export default config;

src/routes/
├── +page.svelte                    → /
├── +layout.svelte                  → (root layout untuk semua halaman)
│
├── about/
│   └── +page.svelte                → /about
│
├── blog/
│   ├── +page.svelte                → /blog
│   ├── +page.server.js             → (load data untuk /blog)
│   └── [slug]/
│       ├── +page.svelte            → /blog/my-post
│       ├── +page.server.js         → (load data per slug)
│       └── +error.svelte           → (error handler)
│
├── products/
│   ├── +page.svelte                → /products
│   └── [[category]]/
│       └── +page.svelte            → /products atau /products/shoes
│                                     ([[ ]] = opsional parameter)
│
├── [...catchall]/
│   └── +page.svelte                → /* (catch-all route)
│
└── api/
    ├── users/
    │   └── +server.js              → GET/POST /api/users
    └── auth/
        └── login/
            └── +server.js          → POST /api/auth/login

<!-- Dynamic route: /blog/:slug -->
<script>
  // data di-pass dari +page.server.js load function
  export let data;
</script>

<svelte:head>
  <title>{data.post.title} | BeebaneLabs</title>
  <meta name="description" content={data.post.excerpt} />
</svelte:head>

<article class="blog-post">
  <h1>{data.post.title}</h1>
  <p class="meta">
    Ditulis oleh {data.post.author} · {data.post.date}
  </p>
  <div class="content">
    {@html data.post.content}
  </div>
</article>

<style>
  .blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
  }

  .meta {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }

  .content :global(h2) {
    margin-top: 2rem;
    color: var(--heading-color);
  }

  .content :global(p) {
    line-height: 1.8;
  }
</style>

<script>
  import { page } from '$app/stores';
</script>

<nav>
  <a href="/" class:active={$page.url.pathname === '/'}>
    Beranda
  </a>
  <a href="/blog" class:active={$page.url.pathname.startsWith('/blog')}>
    Blog
  </a>
  <a href="/about" class:active={$page.url.pathname === '/about'}>
    Tentang
  </a>

  <!-- Link dengan prefetching -->
  <a href="/products" data-sveltekit-preload-data>
    Produk
  </a>
</nav>

<style>
  nav {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
  }

  a {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s;
  }

  a:hover {
    background: var(--hover-bg);
  }

  a.active {
    background: var(--primary-color);
    color: white;
  }
</style>

<script>
  import { goto, invalidate, invalidateAll } from '$app/navigation';

  async function handleLogin() {
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      body: JSON.stringify({ email, password })
    });

    if (response.ok) {
      // Redirect ke dashboard
      await goto('/dashboard');
    }
  }

  async function handleLogout() {
    await fetch('/api/auth/logout', { method: 'POST' });

    // Invalidate semua load data — trigger re-fetch
    await invalidateAll();

    // Redirect ke home
    await goto('/');
  }

  async function refreshData() {
    // Invalidate specific URL — trigger re-fetch hanya untuk URL tersebut
    await invalidate('/api/products');
  }
</script>

<button on:click={handleLogin}>Login</button>
<button on:click={handleLogout}>Logout</button>
<button on:click={refreshData}>Refresh Data</button>

// src/routes/blog/[slug]/+page.server.js
// Hanya berjalan di server — aman untuk database, API keys, dll

import { error } from '@sveltejs/kit';
import { db } from '$lib/server/db.js';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params, setHeaders }) {
  // params.slug = nilai dari URL /blog/[slug]
  const { slug } = params;

  // Fetch dari database
  const post = await db.posts.findUnique({
    where: { slug },
    include: { author: true, tags: true }
  });

  // Jika post tidak ditemukan, throw error 404
  if (!post) {
    throw error(404, {
      message: 'Artikel tidak ditemukan'
    });
  }

  // Set cache headers
  setHeaders({
    'Cache-Control': 'public, max-age=3600'
  });

  // Return data — tersedia di +page.svelte sebagai `data`
  return {
    post: {
      title: post.title,
      content: post.content,
      excerpt: post.excerpt,
      author: post.author.name,
      date: post.createdAt.toLocaleDateString('id-ID'),
      tags: post.tags.map(t => t.name)
    }
  };
}

// src/routes/products/+page.js
// Berjalan di server (SSR) DAN client (navigasi SPA)

/** @type {import('./$types').PageLoad} */
export async function load({ fetch, url }) {
  // fetch() — SvelteKit's enhanced fetch
  // Otomatis handle cookies dan relative URLs saat SSR

  const category = url.searchParams.get('category') || 'all';
  const page = url.searchParams.get('page') || '1';

  const response = await fetch(
    `/api/products?category=${category}&page=${page}`
  );
  const products = await response.json();

  return {
    products: products.items,
    pagination: products.pagination,
    currentCategory: category
  };
}

<script>
  // data otomatis di-pass dari load function
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<svelte:head>
  <title>{data.post.title}</title>
</svelte:head>

<article>
  <h1>{data.post.title}</h1>
  <p>Oleh {data.post.author} · {data.post.date}</p>

  <div class="tags">
    {#each data.post.tags as tag}
      <span class="tag">{tag}</span>
    {/each}
  </div>

  <div class="content">
    {@html data.post.content}
  </div>
</article>

// Akses data dari parent layout load function
export async function load({ params, parent }) {
  // Ambil data dari +layout.server.js di atas
  const parentData = await parent();
  const currentUser = parentData.user;

  const post = await db.posts.findUnique({
    where: { slug: params.slug }
  });

  // Cek apakah user bisa edit post ini
  const canEdit = currentUser?.id === post.authorId ||
                  currentUser?.role === 'admin';

  return {
    post,
    canEdit
  };
}

// src/routes/contact/+page.server.js

import { fail } from '@sveltejs/kit';
import { sendEmail } from '$lib/server/email.js';

/** @type {import('./$types').Actions} */
export const actions = {
  // Default action — dipanggil saat form action="?/contact"
  contact: async ({ request }) => {
    // Ambil data dari form submission
    const formData = await request.formData();
    const name = formData.get('name');
    const email = formData.get('email');
    const message = formData.get('message');

    // Validasi server-side
    const errors = {};

    if (!name || name.length < 2) {
      errors.name = 'Nama harus minimal 2 karakter';
    }

    if (!email || !email.includes('@')) {
      errors.email = 'Email tidak valid';
    }

    if (!message || message.length < 10) {
      errors.message = 'Pesan harus minimal 10 karakter';
    }

    // Jika ada error, return data dengan fail()
    if (Object.keys(errors).length > 0) {
      return fail(400, {
        errors,
        // Preserve form values agar user tidak perlu mengetik ulang
        values: { name, email, message }
      });
    }

    // Kirim email
    try {
      await sendEmail({ name, email, message });
    } catch (err) {
      return fail(500, {
        error: 'Gagal mengirim email. Coba lagi nanti.',
        values: { name, email, message }
      });
    }

    // Return success
    return { success: true };
  }
};

<script>
  import { enhance } from '$app/forms';

  /** @type {import('./$types').PageData} */
  export let data;

  /** @type {import('./$types').ActionData} */
  export let form;

  let loading = false;
</script>

<svelte:head>
  <title>Hubungi Kami</title>
</svelte:head>

<h1>Hubungi Kami</h1>

{#if form?.success}
  <div class="alert success">
    ✅ Pesan berhasil dikirim! Kami akan segera membalas.
  </div>
{/if}

{#if form?.error}
  <div class="alert error">
    ❌ {form.error}
  </div>
{/if}

<!--
  use:enhance = progressive enhancement
  Form tetap berfungsi tanpa JS, tapi dengan JS
  mendapatkan UX yang lebih baik (no full page reload)
-->
<form method="POST" action="?/contact" use:enhance={() => {
  loading = true;

  return async ({ result, update }) => {
    loading = false;
    await update();
  };
}}>
  <label>
    Nama
    <input
      type="text"
      name="name"
      value={form?.values?.name ?? ''}
      class:error={form?.errors?.name}
      required
    />
    {#if form?.errors?.name}
      <span class="error-msg">{form.errors.name}</span>
    {/if}
  </label>

  <label>
    Email
    <input
      type="email"
      name="email"
      value={form?.values?.email ?? ''}
      class:error={form?.errors?.email}
      required
    />
    {#if form?.errors?.email}
      <span class="error-msg">{form.errors.email}</span>
    {/if}
  </label>

  <label>
    Pesan
    <textarea
      name="message"
      rows="5"
      class:error={form?.errors?.message}
      required
    >{form?.values?.message ?? ''}</textarea>
    {#if form?.errors?.message}
      <span class="error-msg">{form.errors.message}</span>
    {/if}
  </label>

  <button type="submit" disabled={loading}>
    {loading ? 'Mengirim...' : 'Kirim Pesan'}
  </button>
</form>

<style>
  .error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 4px;
  }

  input.error, textarea.error {
    border-color: #ef4444;
  }

  .alert.success {
    background: #065f46;
    color: #a7f3d0;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  .alert.error {
    background: #7f1d1d;
    color: #fca5a5;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
  }
</style>

// src/routes/api/products/+server.js
// GET /api/products?category=shoes&page=1

import { json, error } from '@sveltejs/kit';
import { db } from '$lib/server/db.js';

/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
  const category = url.searchParams.get('category');
  const page = parseInt(url.searchParams.get('page') || '1');
  const limit = parseInt(url.searchParams.get('limit') || '20');

  const where = category ? { category } : {};

  const [products, total] = await Promise.all([
    db.products.findMany({
      where,
      take: limit,
      skip: (page - 1) * limit,
      orderBy: { createdAt: 'desc' }
    }),
    db.products.count({ where })
  ]);

  return json({
    items: products,
    pagination: {
      page,
      limit,
      total,
      totalPages: Math.ceil(total / limit)
    }
  });
}

/** @type {import('./$types').RequestHandler} */
export async function POST({ request }) {
  const body = await request.json();

  // Validasi
  if (!body.name || !body.price) {
    throw error(400, 'Name dan price wajib diisi');
  }

  const product = await db.products.create({
    data: {
      name: body.name,
      price: parseFloat(body.price),
      category: body.category || 'uncategorized',
      description: body.description || ''
    }
  });

  return json({ success: true, product }, { status: 201 });
}

// src/routes/api/products/[id]/+server.js
// GET /api/products/123
// PUT /api/products/123
// DELETE /api/products/123

import { json, error } from '@sveltejs/kit';

export async function GET({ params }) {
  const product = await db.products.findUnique({
    where: { id: params.id }
  });

  if (!product) {
    throw error(404, 'Produk tidak ditemukan');
  }

  return json(product);
}

export async function PUT({ params, request }) {
  const body = await request.json();

  const product = await db.products.update({
    where: { id: params.id },
    data: body
  });

  return json({ success: true, product });
}

export async function DELETE({ params }) {
  await db.products.delete({
    where: { id: params.id }
  });

  return json({ success: true });
}

// src/lib/server/db.js
// File di $lib/server/ TIDAK BISA di-import dari client code
// Ini sangat bagus untuk menyimpan kode sensitif

import { PrismaClient } from '@prisma/client';
import { DATABASE_URL } from '$env/static/private';

const prisma = new PrismaClient({
  datasources: {
    db: { url: DATABASE_URL }
  }
});

export { prisma as db };

// Contoh utility functions
export async function getUserFromSession(cookies) {
  const sessionId = cookies.get('session_id');
  if (!sessionId) return null;

  const session = await prisma.session.findUnique({
    where: { id: sessionId },
    include: { user: true }
  });

  return session?.user || null;
}

<script>
  // Props — diterima dari parent
  export let name;
  export let email;
  export let role = 'member'; // default value

  // Reactive state — langsung reactive tanpa ref() atau useState()!
  let isExpanded = false;

  // Reactive declarations — otomatis update saat dependencies berubah
  $: initials = name
    .split(' ')
    .map(n => n[0])
    .join('')
    .toUpperCase();

  $: badgeClass = role === 'admin' ? 'badge-admin' : 'badge-member';

  // Functions
  function toggleExpand() {
    isExpanded = !isExpanded;
  }
</script>

<div class="user-card" on:click={toggleExpand}>
  <div class="avatar">{initials}</div>

  <div class="info">
    <h3>{name}</h3>
    <p>{email}</p>
    <span class="badge {badgeClass}">{role}</span>
  </div>

  {#if isExpanded}
    <div class="details">
      <slot />
    </div>
  {/if}
</div>

<style>
  /* CSS di sini otomatis scoped ke komponen ini! */
  .user-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s;
  }

  .user-card:hover {
    transform: translateY(-2px);
  }

  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
  }

  .badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
  }

  .badge-admin { background: #ef4444; color: white; }
  .badge-member { background: #3b82f6; color: white; }

  .details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
  }
</style>

<script>
  // Simple reactive variable — cukup deklarasi, langsung reactive!
  let count = 0;

  // Reactive declaration — update otomatis saat count berubah
  $: doubled = count * 2;
  $: quadrupled = doubled * 2;

  // Reactive statement (side effect)
  $: {
    console.log(`Count berubah: ${count}`);
    console.log(`Doubled: ${doubled}`);
  }

  // Reactive if statement
  $: if (count > 10) {
    alert('Count sudah lebih dari 10!');
  }

  // Array reactivity — gunakan assignment (=) untuk trigger update
  let items = ['apel', 'pisang'];

  function addItem(fruit) {
    // ❌ items.push(fruit) — TIDAK reactive!
    // ✅ items = [...items, fruit] — reactive!
    items = [...items, fruit];
  }

  function removeItem(index) {
    // ✅ Filter juga membuat array baru (reactive)
    items = items.filter((_, i) => i !== index);
  }
</script>

<!-- Template -->
<button on:click={() => count++}>
  Klik: {count}
</button>
<p>Doubled: {doubled}</p>
<p>Quadrupled: {quadrupled}</p>

<ul>
  {#each items as item, i}
    <li>
      {item}
      <button on:click={() => removeItem(i)}>✕</button>
    </li>
  {/each}
</ul>

<script>
  let products = [
    { id: 1, name: 'Laptop', price: 15000000, inStock: true },
    { id: 2, name: 'Mouse', price: 150000, inStock: false },
    { id: 3, name: 'Keyboard', price: 500000, inStock: true }
  ];

  let showProducts = true;
</script>

<!-- Conditional rendering -->
{#if showProducts}
  <h2>Daftar Produk</h2>

  <!-- Loop dengan each -->
  {#each products as product (product.id)}
    <div class="product">
      <h3>{product.name}</h3>
      <p>Rp {product.price.toLocaleString('id-ID')}</p>

      <!-- Nested conditional -->
      {#if product.inStock}
        <span class="stock available">Tersedia</span>
      {:else}
        <span class="stock unavailable">Habis</span>
      {/if}
    </div>

  {:else}
    <p>Tidak ada produk ditemukan.</p>
    <!-- {:else} di each = jika array kosong -->
  {/each}

{:else}
  <p>Produk disembunyikan.</p>
{/if}

<!-- Await blocks — handle promises langsung di template -->
{#await fetchProducts()}
  <p>Loading produk...</p>
{:then products}
  {#each products as product}
    <p>{product.name}</p>
  {/each}
{:catch error}
  <p>Error: {error.message}</p>
{/await}

// src/lib/stores.js
import { writable, derived, readable } from 'svelte/store';

// 1. WRITABLE STORE — bisa dibaca dan ditulis
export const count = writable(0);
export const user = writable(null);
export const cart = writable([]);

// 2. READABLE STORE — hanya bisa dibaca (nilai dikontrol oleh store)
export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  // Cleanup function — dipanggil saat tidak ada subscriber
  return function stop() {
    clearInterval(interval);
  };
});

// 3. DERIVED STORE — dihitung dari store lain
export const formattedTime = derived(
  time,
  ($time) => $time.toLocaleTimeString('id-ID')
);

export const cartTotal = derived(cart, ($cart) =>
  $cart.reduce((sum, item) => sum + item.price * item.quantity, 0)
);

export const cartCount = derived(cart, ($cart) =>
  $cart.reduce((sum, item) => sum + item.quantity, 0)
);

<script>
  import { cart, cartTotal, cartCount } from '$lib/stores.js';

  function addToCart(product) {
    // $cart = shorthand untuk subscribe dan set
    $cart = [...$cart, { ...product, quantity: 1 }];
  }

  function removeFromCart(productId) {
    $cart = $cart.filter(item => item.id !== productId);
  }

  function updateQuantity(productId, newQty) {
    $cart = $cart.map(item =>
      item.id === productId
        ? { ...item, quantity: Math.max(0, newQty) }
        : item
    ).filter(item => item.quantity > 0);
  }

  // $ prefix di template = auto-subscribe/unsubscribe
  // $cart = store value, $cartTotal = derived value
</script>

<div class="cart">
  <h2>🛒 Keranjang ({$cartCount} item)</h2>

  {#if $cart.length === 0}
    <p>Keranjang kosong</p>
  {:else}
    {#each $cart as item (item.id)}
      <div class="cart-item">
        <span>{item.name}</span>
        <div class="qty-controls">
          <button on:click={() => updateQuantity(item.id, item.quantity - 1)}>-</button>
          <span>{item.quantity}</span>
          <button on:click={() => updateQuantity(item.id, item.quantity + 1)}>+</button>
        </div>
        <span>Rp {(item.price * item.quantity).toLocaleString('id-ID')}</span>
        <button on:click={() => removeFromCart(item.id)}>✕</button>
      </div>
    {/each}

    <div class="cart-total">
      <strong>Total: Rp {$cartTotal.toLocaleString('id-ID')}</strong>
    </div>
  {/if}
</div>

<script>
  import Header from '$lib/components/Header.svelte';
  import Footer from '$lib/components/Footer.svelte';

  /** @type {import('./$types').LayoutData} */
  export let data;
</script>

<div class="app">
  <Header user={data.user} />

  <main>
    <!-- <slot /> merender child routes -->
    <slot />
  </main>

  <Footer />
</div>

<style>
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  main {
    flex: 1;
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
</style>

<script>
  import { page } from '$app/stores';

  const navItems = [
    { href: '/dashboard', label: 'Overview', icon: '📊' },
    { href: '/dashboard/products', label: 'Produk', icon: '📦' },
    { href: '/dashboard/orders', label: 'Pesanan', icon: '🛒' },
    { href: '/dashboard/settings', label: 'Settings', icon: '⚙️' }
  ];
</script>

<div class="dashboard-layout">
  <aside class="sidebar">
    <h2>Dashboard</h2>
    <nav>
      {#each navItems as item}
        <a
          href={item.href}
          class:active={$page.url.pathname === item.href}
        >
          <span>{item.icon}</span>
          {item.label}
        </a>
      {/each}
    </nav>
  </aside>

  <div class="dashboard-content">
    <slot />
  </div>
</div>

<style>
  .dashboard-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    min-height: 70vh;
  }

  .sidebar {
    background: var(--sidebar-bg);
    padding: 1.5rem;
    border-radius: 12px;
  }

  .sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .sidebar nav a {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.2s;
  }

  .sidebar nav a:hover { background: var(--hover-bg); }
  .sidebar nav a.active { background: var(--primary-color); color: white; }
</style>

<script>
  import { page } from '$app/stores';
</script>

<div class="error-page">
  <h1>{$page.status}</h1>

  {#if $page.status === 404}
    <h2>Halaman Tidak Ditemukan</h2>
    <p>Maaf, halaman yang Anda cari tidak tersedia.</p>
    <a href="/" class="btn">Kembali ke Beranda</a>
  {:else}
    <h2>Terjadi Kesalahan</h2>
    <p>{$page.error?.message || 'Unknown error'}</p>
    <a href="/" class="btn">Kembali ke Beranda</a>
  {/if}
</div>

<style>
  .error-page {
    text-align: center;
    padding: 4rem 2rem;
  }

  .error-page h1 {
    font-size: 6rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
  }

  .btn {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 2rem;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 8px;
  }
</style>

// svelte.config.js — untuk static site generation
import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      // Default output directory
      pages: 'build',
      assets: 'build',
      // Fallback page untuk SPA routing
      fallback: '404.html',
      // Precompress files dengan gzip/brotli
      precompress: false,
      // Strict mode — error jika ada prerender yang gagal
      strict: true
    })
  }
};

// Di +layout.js atau +page.js, tentukan prerender:
// export const prerender = true;

// svelte.config.js — untuk Node.js server
import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter({
      // Output directory
      out: 'build',
      // Precompress dengan gzip
      precompress: true,
      // Environment prefix untuk env vars
      envPrefix: ''
    })
  }
};

// Build: npm run build
// Jalankan: node build/index.js

// Environment variables:
// PORT=3000
// ORIGIN=https://example.com