Belajar Svelte - Memulai Proyek Svelte

#Pendahuluan

Dua episode pertama memberi kalian pemahaman konsep: Svelte adalah compiler, dan sebuah komponen .svelte terdiri dari script, markup, dan style. Sekarang saatnya menurunkan teori ke praktik. Episode 3 ini adalah gerbang masuk ke dunia nyata: kalian akan membuat proyek Svelte yang benar-benar bisa dijalankan.

Membuat proyek bukan sekadar menjalankan satu perintah. Kalian perlu memahami apa yang dihasilkan scaffold, ke mana meletakkan kode, bagaimana dev server bekerja, dan konfigurasi apa saja yang menyertai proyek. Semua itu menentukan kenyamanan kalian untuk 20 episode ke depan.

Di episode ini kalian akan membuat aplikasi dengan npm create svelte@latest, mengenali struktur proyek SvelteKit, menjalankan dev server dengan hot reload, dan menyiapkan TypeScript, ESLint, serta Prettier. Setelah selesai, kalian punya fondasi proyek yang siap dikembangkan.

#Membuat Aplikasi Svelte Baru

#Scaffold dengan npm create svelte@latest

Cara resmi dan paling disarankan adalah menggunakan command line yang disediakan tim Svelte. Perintah ini membuat proyek SvelteKit lengkap dengan routing, SSR, dan semua konfigurasi dasar. Buka terminal di direktori tempat kalian menyimpan proyek, lalu jalankan:

npm create svelte@latest my-app

Pertanyaan interaktif akan muncul. Pilih framework SvelteKit, tambahkan TypeScript, dan aktifkan opsi seperti ESLint dan Prettier. Jika kalian ragu, gunakan opsi default yang ditawarkan. Proses ini hanya mengunduh template dan menginstall dependency — tidak ada kode ajaib yang terjadi di belakang layar.

npm create svelte@latest my-app memakai mekanisme npm create untuk menjalankan package initializer terbaru tanpa perlu menginstall global. my-app adalah nama folder proyek kalian. Setelah selesai, masuk ke direktori tersebut dan install dependency:

cd my-app
npm install

#Alternatif: Svelte Murni dengan Vite

Kalian tidak selalu butuh SvelteKit. Untuk komponen library, prototipe cepat, atau single-page application sederhana, gunakan template Svelte dari Vite. Proyek ini hanya berisi kompiler Svelte, dev server Vite, dan Vite plugin — tanpa routing atau SSR:

npm create vite@latest my-app -- --template svelte-ts
cd my-app
npm install

Template svelte-ts menghasilkan proyek dengan TypeScript. Jika kalian lebih suka JavaScript, gunakan --template svelte. Perbedaan utama: proyek Vite memakai src/App.svelte sebagai komponen akar dan tidak memiliki src/routes — kalian akan melihat perbandingannya di bagian berikutnya.

#Struktur Proyek

#src/routes: Routing Berbasis Filesystem

SvelteKit mengorganisasi halaman lewat filesystem. Setiap file .svelte di dalam src/routes menjadi route. Contohnya src/routes/+page.svelte adalah halaman utama, dan folder src/routes/about dengan file +page.svelte di dalamnya menghasilkan rute /about. Konvensi ini membuat navigasi aplikasi terlihat jelas dari struktur folder.

my-app
├── src
│   ├── lib          # komponen dan util yang dibagikan
│   └── routes       # routing berbasis filesystem
│       └── +page.svelte
├── static           # aset publik: gambar, favicon, robots.txt
├── svelte.config.js
├── vite.config.ts
└── package.json

src/routes/+page.svelte menandai halaman utama aplikasi. Semua rute dibangun dari folder ini. Untuk komponen dan helper yang dipakai lintas halaman, letakkan di src/lib — SvelteKit memberi alias $lib agar import tidak menggunakan path relatif panjang.

#Komponen Pertama Kalian

Buka src/routes/+page.svelte dan ganti isinya dengan komponen sederhana berikut:

<script>
  let nama = "Svelte"
</script>
 
<h1>Halo {nama}!</h1>
<p>Proyek pertama berhasil berjalan.</p>

let nama = "Svelte" adalah state paling sederhana: satu variabel, satu tampilan. Saat nilai nama berubah, teks <h1> ikut diperbarui tanpa menulis kode DOM manual. Ini inti reaktivitas Svelte yang kalian kenal di episode 2.

#Menjalankan Dev Server dan Hot Reload

Dengan dependency terpasang, jalankan dev server:

npm run dev

Vite akan memulai server lokal, biasanya di http://localhost:5173, dan menampilkan pesan bahwa server siap. Buka alamat tersebut di browser. Yang paling penting: setiap kali kalian menyimpan perubahan pada file .svelte, browser langsung memperbarui tampilan tanpa reload manual — inilah hot reload.

Vite juga membuka halaman otomatis jika kalian menambahkan flag -- --open. Untuk SvelteKit, server lokal yang berjalan adalah adapter development yang menjalankan server-side rendering sementara — perilaku penuhnya akan kalian bedah di episode 21 tentang SSR.

npm run dev menanggil script dev di package.json. Jika port 5173 sedang dipakai, Vite otomatis memilih port lain dan memberi tahu lewat output terminal.

#TypeScript, ESLint, dan Prettier

#TypeScript

Jika kalian memilih TypeScript saat scaffold, file kalian memiliki ekstensi .ts untuk script dan .svelte.ts untuk logika non-komponen. TypeScript menangkap kesalahan tipe sebelum runtime. Konfigurasi ada di tsconfig.json — SvelteKit menyertakan pengaturan khusus seperti verbatimModuleSyntax dan jalur $lib.

<script lang="ts">
  let count: number = 0
 
  function tambah() {
    count += 1
  }
</script>
 
<button onclick={tambah}>Klik {count}</button>

let count: number = 0 memberi tahu compiler bahwa count hanya boleh berisi angka. Salah menugaskan string akan langsung ditolak saat npm run check dijalankan — lebih baik error di sini daripada di produksi.

#ESLint dan Prettier

ESLint menjaga kualitas kode dengan aturan yang bisa dikonfigurasi, sedangkan Prettier menyeragamkan format. SvelteKit template menyertakan keduanya. Jalankan:

npm run lint
npx prettier --write .

npx prettier --write . memformat seluruh proyek sesuai konfigurasi di .prettierrc. Svelte extension di VS Code juga bisa menerapkan format otomatis setiap kali kalian menyimpan file. Kebiasaan menjalankan lint dan format sejak awal mencegah utang teknis yang menumpuk.

#Penutup

Inti yang harus dibawa pulang:

• Gunakan npm create svelte@latest untuk proyek SvelteKit lengkap, atau Vite dengan template svelte-ts untuk Svelte murni.
• Routing SvelteKit berbasis filesystem: setiap file di src/routes adalah sebuah halaman.
• Letakkan komponen dan util bersama di src/lib dengan alias $lib, dan aset statis di static.
• npm run dev menjalankan dev server dengan hot reload otomatis.
• TypeScript, ESLint, dan Prettier sudah terkonfigurasi di template; jalankan rutin agar proyek tetap sehat.
• Sebuah komponen .svelte sederhana hanya butuh state dan markup untuk mulai bekerja.

Di episode 4 selanjutnya kita akan membahas template dan bindings — deklarasi variabel, property binding, event binding, class binding, reactive statements, serta conditional dan list rendering. Ini adalah sintaks yang akan kalian pakai setiap hari, jadi pastikan proyek episode 3 sudah bisa berjalan dengan lancar.