Belajar SvelteKit - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar SvelteKit! Series ini akan membawa kalian menguasai SvelteKit — full-stack framework untuk Svelte — dari fondasi konsep sampai production readiness. Total ada 24 episode yang tersusun dari enam fase.

Tapi sebelum menyentuh npm create svelte, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena SvelteKit berdiri di atas tiga hal sekaligus: bahasa markup dan styling yaitu HTML dan CSS, bahasa pemrograman yaitu JavaScript, dan konsep UI reaktif berbasis komponen. Kalau salah satu tidak solid, sisanya akan terasa mengambang.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan Node.js dan editor, mengenal tooling SvelteKit, lalu melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

Sepanjang series ini, setiap episode dirancang berurutan: konsep dibangun di atas konsep sebelumnya. Jika ada bagian yang terasa melompat, kembalilah ke episode pendahulunya — semuanya sengaja disusun bertahap.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript Modern

SvelteKit menghasilkan HTML dan CSS yang ditulis dengan sintaks komponen Svelte. Kalian harus nyaman membaca struktur tag HTML, memahami box model serta flexbox dan grid di CSS, dan menguasai JavaScript ES6+ seperti arrow function, destructuring, spread operator, async/await, serta module import dan export.

const format = (nama, versi) => `SvelteKit ${versi} untuk ${nama}`;
export default format;

Jika pola di atas masih terasa asing, luangkan waktu sejenak untuk memperdalam JavaScript modern sebelum lanjut ke episode berikutnya.

#Reactive Programming dan Component-Based UI

Svelte memakai model compiler-based reactivity: bukan virtual DOM, melainkan kode yang di-compile menjadi JavaScript imperatif yang ringan. Konsep yang wajib dipahami sebelum masuk SvelteKit:

• State dan re-render: perubahan data harus tercermin di UI secara otomatis.
• Props dan events: komponen berkomunikasi lewat input dan output.
• Lifecycle: kapan komponen dibuat, di-mount, dan di-destroy.

#Command Line, Git, dan Package Manager

Setiap episode akan menjalankan perintah di terminal. Kalian wajib bisa cd dan mkdir, serta terbiasa membaca output error. Git dipakai untuk versioning, dan package manager seperti npm untuk mengelola dependency. Kalau kalian sudah akrab dengan Bun atau pnpm, konsepnya sama saja.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS Terbaru

SvelteKit 2 membutuhkan Node.js minimal versi 18.13 atau 20 ke atas. Rekomendasi saat series ini ditulis adalah versi LTS terbaru yang stabil. Unduh dari situs resmi nodejs.org atau kelola lewat Node Version Manager agar mudah berganti versi tanpa mengganggu proyek lain.

node --version
npm --version

Output node --version harus menampilkan versi 20 atau lebih baru. Jika belum, install lewat Node Version Manager agar mudah berganti versi. Prosesnya sederhana: install nvm, lalu jalankan perintah nvm install --lts dan nvm use --lts pada terminal.

#IDE: VS Code dengan Svelte Extension

VS Code adalah pilihan paling nyaman untuk Svelte. Pasang ekstensi Svelte for VS Code yang menyediakan syntax highlighting, auto-completion, dan diagnostics untuk file .svelte. Untuk proyek yang juga menyentuh Vue, ekstensi Volar bisa dipasang sebagai pelengkap, meskipun tidak wajib untuk SvelteKit. Pastikan ekstensi Svelte terhubung ke workspace yang benar agar autocomplete bekerja maksimal.

#Browser Modern dan CLI SvelteKit

Gunakan browser modern seperti Firefox atau Chrome dengan devtools yang lengkap. Sedangkan pembuatan project memakai CLI bawaan npm:

npm create svelte@latest nama-aplikasi

Perintah npm create svelte@latest nama-aplikasi akan menampilkan wizard interaktif yang akan kita bedah rinci di episode 3.

CLI scaffolder yang sama akan dipakai lagi di episode 3, jadi kali ini cukup pahami tujuannya: meminta SvelteKit membangun kerangka proyek untuk kalian.

#Verifikasi Environment

Sebelum lanjut, pastikan semuanya siap dengan verifikasi cepat:

node -v
npm -v
git --version

Jika tiga perintah di atas mengeluarkan versi tanpa error, environment dasar kalian sudah siap. Selain itu, pastikan RAM minimal 8GB agar dev server, browser, dan editor berjalan bersamaan dengan nyaman. Verifikasi ulang setelah mengganti versi Node agar tidak ada konflik PATH antara versi lama dan baru.

Jika environment belum siap, jangan ragu mengulang langkah di atas. Memperbaiki setup di awal jauh lebih murah daripada mengejar error yang penyebabnya adalah versi Node yang salah.

#Ringkasan Skill yang Harus Dikuasai

Rangkuman prasyarat yang sudah kalian siapkan di episode 0:

• JavaScript ES6+ dengan kebiasaan memakai pattern modern.
• Konsep reactivity dan component-based UI.
• Node.js LTS versi 20 ke atas lengkap dengan npm.
• VS Code dengan Svelte extension sebagai editor utama.
• Browser modern (Firefox atau Chrome) untuk devtools dan pengujian harian.
• Git terinstall untuk versioning sepanjang series.
• Terminal yang nyaman untuk menjalankan perintah harian.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Fondasi yang kuat akan membuat 23 episode berikutnya terasa jauh lebih ringan.

#Penutup

Inti yang harus dibawa pulang:

• SvelteKit adalah full-stack framework yang berdiri di atas Svelte, jadi kuasai dulu dasar JavaScript dan komponen.
• Reactivity di Svelte adalah compiler-based, bukan virtual DOM.
• Siapkan Node.js LTS minimal versi 20, VS Code dengan Svelte extension, dan Git.
• Package manager utama di series ini adalah npm, dengan Bun atau pnpm sebagai alternatif.
• Verifikasi environment memakai node -v, npm -v, dan git --version.
• RAM minimal 8GB membuat dev server dan browser berjalan nyaman.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan SvelteKit — dari lahirnya Svelte sebagai compiler yang membuang virtual DOM, kelahiran SvelteKit sebagai meta-framework full-stack, hingga perbandingannya dengan framework lain. Pastikan environment kalian sudah siap, karena perjalanan Belajar SvelteKit baru saja dimulai!