Belajar SvelteKit - Memulai Proyek SvelteKit

#Pendahuluan

Dua episode sebelumnya membangun fondasi konseptual: kalian tahu apa itu SvelteKit dan bagaimana arsitekturnya bekerja. Sekarang saatnya tangan kalian kotor. Episode 3 adalah pintu masuk praktis ke seluruh series — setelah menyelesaikannya, kalian memiliki aplikasi SvelteKit yang benar-benar berjalan, lengkap dengan TypeScript, ESLint, dan Prettier.

Proses scaffolding resmi bukan sekadar menyalin template. Scaffolder menawarkan keputusan arsitektural penting — bahasa, linting, testing — dan menuliskannya ke dalam konfigurasi yang benar. Hasilnya konsisten dengan best practice ekosistem dan mudah di-maintain.

Sepanjang episode ini, jalankan setiap perintah di terminal kalian sendiri. Jangan hanya membaca; mengetik perintah dan membaca output error adalah bagian dari proses belajar. Mari mulai dari perintah pertama.

Siapkan terminal di folder tempat proyek akan dibuat, misalnya ~/code, dan pastikan koneksi internet stabil karena scaffolder akan mengunduh template.

#Membuat Aplikasi dengan Scaffolder Resmi

Cara resmi memulai proyek baru adalah dengan scaffolder SvelteKit. Command line ini memandu kalian memilih template, bahasa, dan tooling dalam dialog interaktif.

npm create svelte@latest my-app
cd my-app
npm install

Setelah perintah pertama dijalankan, scaffolder menanyakan beberapa pilihan: tipe proyek (Skeleton, demo, atau library), penggunaan TypeScript, serta integrasi ESLint, Prettier, Playwright, dan Vitest. Untuk series ini pilih Skeleton project agar bersih, aktifkan TypeScript dan ESLint, lalu tambahkan Prettier. Semua pilihan ini bisa diubah belakangan, jadi tidak ada keputusan yang permanen.

Catatan: npm create svelte@latest setara dengan npx create-svelte@latest, keduanya memanggil paket resmi yang sama.

#Menjalankan Installasi

Perintah npm install mengunduh semua dependensi. SvelteKit 2 dan Svelte 5 memiliki ukuran dependensi yang wajar, tapi di jaringan lambat proses ini bisa memakan waktu beberapa menit. Setelah selesai, jangan lupa menjalankan npm install --frozen-lockfile saat bekerja dalam tim agar versi terpasang persis sama di semua mesin.

Periksa bahwa folder node_modules muncul dan file lockfile ikut ter-generate. Lockfile inilah yang menjamin semua orang di tim mendapat versi dependensi yang identik.

#Struktur Folder dan Konfigurasi Awal

Proyek yang baru dibuat memiliki struktur yang sudah kalian kenal dari episode 2. Bagian yang paling sering kalian sentuh antara lain:

• src/routes — semua halaman dan endpoint aplikasi.
• src/lib — kode bersama yang bisa di-import dengan alias $lib.
• src/app.html — dokumen HTML utama tempat markup aplikasi dirender.
• static — aset mentah yang disalin apa adanya ke output.
• svelte.config.js — konfigurasi SvelteKit.
• vite.config.js — konfigurasi Vite.
• tsconfig.json — konfigurasi TypeScript.

Setiap folder di src/routes menjadi bagian dari URL aplikasi, dan file berawalan plus seperti +page.svelte memiliki peran khusus dalam routing.

#Konfigurasi SvelteKit

Konfigurasi SvelteKit

import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter()
    }
};
 
export default config;

File svelte.config.js mengatur SvelteKit: preprocessor, adapter, alias, dan berbagai opsi kit. File vite.config.js menangani konfigurasi Vite, misalnya plugin. Memisahkan keduanya menjaga kejelasan tanggung jawab. Jangan menaruh konfigurasi Vite di dalam svelte.config.js; dua file ini dipisah agar setiap file punya satu tanggung jawab dan mudah diubah saat kebutuhan berubah.

#TypeScript Strict

File tsconfig.json mewarisi pengaturan dari .svelte-kit/tsconfig.json yang dihasilkan saat build. Dengan strict: true, TypeScript memeriksa tipe di seluruh kode termasuk template Svelte.

#Dev Server dan Hot Module Replacement

Untuk menjalankan aplikasi dalam mode pengembangan:

npm run dev

Server berjalan di http://localhost:5173 secara default. Inilah saatnya kalian merasakan keunggulan SvelteKit dibanding pendekatan reload manual: hot module replacement (HMR) memperbarui modul yang berubah tanpa me-refresh seluruh halaman. Kompilasi pertama memang lebih lama karena Vite memproses seluruh dependensi; kompilasi berikutnya jauh lebih cepat berkat cache.

Ubah teks di src/routes/+page.svelte dan perhatikan perubahan langsung di browser tanpa kehilangan state. Untuk membuka browser otomatis, jalankan npm run dev -- --open. Jika port 5173 sudah dipakai, Vite otomatis pindah ke port berikutnya.

#TypeScript, ESLint, dan Prettier

Proyek SvelteKit menyediakan quality gate yang siap dipakai:

npm run check
npm run lint
npm run format

npm run check menjalankan svelte-check untuk validasi tipe termasuk di dalam file Svelte. npm run lint memanggil ESLint, dan npm run format merapikan format dengan Prettier. Jalankan check sebelum commit — ia menangkap banyak error yang baru muncul saat runtime. Kombinasikan ketiganya dalam satu skrip npm run quality agar mudah dipanggil di CI nanti.

Ingin memformat satu file saja? Gunakan npx prettier --write src/routes/+page.svelte untuk formatting terarah.

#Penutup

Inti yang harus dibawa pulang:

• Scaffolder resmi npm create svelte@latest menghasilkan proyek siap pakai dalam satu perintah, lengkap dengan pilihan template, bahasa, dan tooling.
• Struktur dasar terdiri atas src/routes, src/lib, static, src/app.html, plus svelte.config.js dan vite.config.js.
• Dev server berjalan di port 5173 dengan HMR yang memperbarui modul tanpa reload penuh dan tanpa kehilangan state.
• TypeScript diaktifkan lewat strict: true; npm run check memvalidasi tipe sampai ke dalam template Svelte.
• ESLint (npm run lint) dan Prettier (npm run format) menjaga kode tetap konsisten dan rapi.
• Selalu jaga versi dependensi konsisten dengan lockfile saat bekerja dalam tim.

Di episode 4 selanjutnya kita masuk ke inti SvelteKit: routing & nested routes. Kalian akan mengubah struktur folder src/routes menjadi URL nyata, memanfaatkan dynamic routes dan catch-all, menyusun nested layouts dan layout reset, serta menavigasi halaman dengan anchor dan fungsi goto dari modul $app/navigation.