SvelteKit adalah framework aplikasi berbasis Svelte yang umum dipakai untuk membangun web modern dengan routing, rendering, dan tooling yang sudah terintegrasi. Jika tujuan Anda adalah mulai cepat dan langsung menjalankan project di local, proses instalasinya sebenarnya cukup singkat. Tantangannya biasanya ada pada detail kecil: versi Node.js, pilihan template, dependency manager, atau error saat dev server dijalankan.

Artikel ini fokus pada praktik. Kita akan mulai dari pengecekan environment, membuat project baru dengan npm create svelte@latest, memilih template, menginstal dependency, menjalankan server development, lalu memahami struktur folder awal agar Anda tidak bingung setelah project berhasil dibuat.

Catatan: Perintah dan output bisa sedikit berbeda tergantung sistem operasi, versi Node.js, atau versi SvelteKit yang terpasang saat Anda menjalankannya. Namun alur dasarnya tetap sama.

1. Syarat Sebelum Install

Sebelum membuat project SvelteKit, pastikan environment dasar sudah siap. Yang paling penting adalah Node.js dan npm. Karena SvelteKit berjalan di atas ekosistem JavaScript modern, versi Node yang terlalu lama sering menjadi penyebab error saat instalasi atau saat menjalankan server development.

1.1 Cek versi Node.js dan npm

Buka terminal, lalu jalankan:

node -v
npm -v

Contoh output:

v20.11.0
10.2.4

Jika kedua perintah di atas mengembalikan versi, berarti Node.js dan npm sudah tersedia. Jika muncul pesan seperti command not found atau node is not recognized, artinya Node.js belum terpasang atau PATH belum benar.

1.2 Versi Node.js yang disarankan

Gunakan versi Node.js yang masih aktif didukung, idealnya versi LTS terbaru. Ini penting karena tooling modern seperti Vite, SvelteKit, dan beberapa dependency lain umumnya mengandalkan fitur runtime Node yang relatif baru.

Jika Anda memakai version manager seperti nvm, Anda bisa mengganti versi dengan lebih aman tanpa mengganggu project lain. Contoh:

nvm install --lts
nvm use --lts

Jika belum ada Node.js, instal dari situs resmi Node.js atau gunakan package manager yang sesuai dengan sistem operasi Anda.

2. Membuat Project SvelteKit Baru

Setelah Node.js siap, langkah berikutnya adalah membuat project baru. Cara paling umum adalah memakai generator resmi melalui npm.

2.1 Jalankan generator project

npm create svelte@latest my-sveltekit-app

Perintah di atas akan:

  • mengunduh generator project Svelte terbaru,
  • membuat folder baru bernama my-sveltekit-app,
  • menjalankan wizard interaktif untuk memilih template dan opsi tambahan.

Jika Anda ingin nama folder berbeda, ganti saja my-sveltekit-app sesuai kebutuhan.

2.2 Masuk ke folder project

cd my-sveltekit-app

2.3 Memilih template saat wizard muncul

Saat generator berjalan, biasanya Anda akan diminta memilih jenis project atau template. Opsi yang tersedia bisa berubah mengikuti versi terbaru, tetapi umumnya Anda akan menemukan pilihan seperti:

  • Skeleton project — project minimal, cocok untuk mulai dari nol.
  • Demo app — project dengan contoh halaman dan fitur bawaan, cocok untuk belajar struktur dan pola dasar.

Untuk kebanyakan kebutuhan belajar atau memulai project nyata tanpa file contoh yang terlalu banyak, pilih Skeleton project. Jika Anda ingin melihat contoh penggunaan route, layout, dan data loading bawaan, pilih Demo app.

Wizard juga bisa menanyakan beberapa opsi tambahan, misalnya:

  • apakah ingin memakai TypeScript,
  • apakah ingin menambahkan ESLint,
  • apakah ingin menambahkan Prettier,
  • apakah ingin menambahkan testing tools.

Jika Anda ingin setup yang rapi sejak awal, kombinasi yang cukup aman adalah:

  • TypeScript: pilih jika tim Anda biasa memakai typing statis; jika belum terbiasa, JavaScript biasa juga tidak masalah.
  • ESLint: disarankan untuk menjaga kualitas kode.
  • Prettier: disarankan untuk konsistensi format kode.

Untuk panduan awal ini, Anda bisa memilih opsi seminimal mungkin agar fokus pada instalasi dan menjalankan project terlebih dahulu.

3. Install Dependency Project

Setelah wizard selesai membuat struktur project, langkah berikutnya adalah menginstal dependency yang didefinisikan di package.json.

npm install

Perintah ini akan membaca daftar dependency lalu membuat folder node_modules dan file lock seperti package-lock.json. Durasi proses tergantung koneksi internet dan performa komputer Anda.

Jika berhasil, Anda biasanya akan melihat ringkasan jumlah package yang diinstal tanpa error fatal.

3.1 Contoh isi package.json awal

Isi file ini bisa berbeda tergantung template dan opsi yang Anda pilih, tetapi secara umum bentuknya mirip seperti berikut:

{
  "name": "my-sveltekit-app",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/kit": "...",
    "svelte": "...",
    "vite": "..."
  }
}

Tiga script yang paling penting di tahap awal:

  • npm run dev untuk menjalankan server development,
  • npm run build untuk build production,
  • npm run preview untuk mencoba hasil build secara local.

Mengapa ini bekerja? Karena SvelteKit menggunakan Vite sebagai development server dan bundler. Saat Anda menjalankan npm run dev, Vite akan menyalakan server local, memproses file Svelte, dan memberikan hot reload saat file berubah.

4. Menjalankan SvelteKit di Local

Setelah dependency terinstal, jalankan server development:

npm run dev

Contoh output:

> my-sveltekit-app@0.0.1 dev
> vite dev

  VITE v5.x.x  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Buka browser, lalu akses URL yang muncul, biasanya:

http://localhost:5173

Jika semuanya berjalan normal, Anda akan melihat halaman awal SvelteKit.

4.1 Menjalankan di port tertentu

Jika ingin memakai port lain, misalnya 3000, Anda bisa menjalankan:

npm run dev -- --port 3000

Perhatikan tanda -- sebelum argumen Vite. Itu diperlukan agar argumen diteruskan ke script yang dijalankan oleh npm.

4.2 Menjalankan agar bisa diakses dari jaringan lokal

Jika ingin mengakses dari device lain dalam jaringan yang sama:

npm run dev -- --host

Ini berguna saat testing di smartphone atau device lain tanpa harus deploy terlebih dahulu.

5. Struktur Folder Awal yang Perlu Dipahami

Begitu project jadi, jangan langsung bingung melihat isi folder. Pada tahap awal, ada beberapa folder dan file yang paling penting untuk dikenali.

my-sveltekit-app/
├── src/
│   ├── app.html
│   ├── lib/
│   ├── routes/
│   │   └── +page.svelte
├── static/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

5.1 Folder src

Folder src adalah pusat kode aplikasi Anda.

  • src/routes berisi halaman dan route aplikasi.
  • src/lib biasanya dipakai untuk komponen, utilitas, atau module yang ingin dipakai ulang.
  • src/app.html adalah template HTML dasar yang dipakai aplikasi saat dirender.

5.2 File +page.svelte

Untuk halaman awal, file yang paling penting biasanya adalah:

src/routes/+page.svelte

Contoh isi sederhana:

<script>
  let title = 'Halo SvelteKit';
</script>

<svelte:head>
  <title>Home</title>
  <meta name="description" content="Halaman awal SvelteKit" />
</svelte:head>

<h1>{title}</h1>
<p>Project SvelteKit sudah berjalan di local.</p>

Jika file ini Anda ubah lalu simpan, browser biasanya akan otomatis me-refresh atau melakukan hot update. Inilah salah satu alasan setup development terasa cepat.

5.3 Folder static

Folder static digunakan untuk file statis seperti favicon, gambar, atau file lain yang ingin disajikan langsung tanpa diproses bundler secara khusus.

5.4 File konfigurasi

  • svelte.config.js berisi konfigurasi inti SvelteKit.
  • vite.config.js berisi konfigurasi Vite.
  • tsconfig.json ada jika project menggunakan atau menyiapkan dukungan TypeScript.

Di tahap awal, Anda tidak perlu langsung mengubah file-file ini kecuali memang ada kebutuhan spesifik.

6. Uji Coba Cepat Setelah Install

Setelah server jalan, sebaiknya lakukan verifikasi sederhana untuk memastikan project benar-benar sehat.

  1. Buka src/routes/+page.svelte.
  2. Ganti isi heading utama.
  3. Simpan file.
  4. Pastikan browser menampilkan perubahan tanpa restart server.

Contoh modifikasi cepat:

<h1>SvelteKit berhasil diinstall</h1>
<p>Environment local siap dipakai untuk development.</p>

Kalau perubahan langsung terlihat, artinya:

  • dependency terinstal dengan benar,
  • Vite dev server berjalan,
  • routing dasar SvelteKit aktif,
  • hot reload berfungsi normal.

7. Troubleshooting Singkat

Berikut beberapa masalah yang paling sering muncul saat instalasi awal.

7.1 Port bentrok

Jika muncul error bahwa port sudah dipakai, artinya ada proses lain yang menggunakan port default, biasanya 5173.

Solusi paling cepat:

npm run dev -- --port 3000

Atau hentikan proses yang memakai port tersebut. Di Linux/macOS, Anda bisa cek:

lsof -i :5173

Di Windows PowerShell:

netstat -ano | findstr :5173

Setelah tahu PID prosesnya, hentikan proses yang tidak diperlukan.

7.2 npm install gagal

Beberapa penyebab umum:

  • versi Node.js terlalu lama,
  • koneksi internet bermasalah,
  • cache npm rusak,
  • izin folder tidak benar.

Langkah yang bisa dicoba:

node -v
npm -v
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Di Windows, penghapusan folder bisa dilakukan manual atau dengan perintah yang sesuai shell yang Anda pakai.

Jika error mengarah ke versi engine atau syntax modern, hampir selalu langkah pertama yang harus dicek adalah upgrade Node.js.

7.3 Command node atau npm tidak dikenali

Ini biasanya karena Node.js belum terpasang atau PATH belum masuk ke environment variable sistem. Solusinya:

  • instal ulang Node.js,
  • tutup dan buka kembali terminal,
  • pastikan instalasi menambahkan Node.js ke PATH.

7.4 Halaman tidak bisa dibuka dari device lain

Jika Anda menjalankan di local default, server hanya tersedia di localhost. Gunakan:

npm run dev -- --host

Lalu akses IP lokal komputer Anda dari device lain pada jaringan yang sama.

8. Langkah Berikutnya Setelah Install Berhasil

Kalau project sudah berhasil jalan, Anda sudah siap masuk ke tahap berikutnya, misalnya:

  • membuat route baru di src/routes,
  • menambahkan komponen reusable di src/lib,
  • menghubungkan API,
  • menambahkan styling,
  • menyiapkan build production.

Namun untuk tahap instalasi, indikator suksesnya sederhana: project bisa dibuat, dependency bisa diinstal, dev server bisa dijalankan, dan perubahan file bisa langsung terlihat di browser.

Penutup

Instalasi SvelteKit dari nol pada dasarnya terdiri dari beberapa langkah inti: pastikan Node.js dan npm tersedia, buat project dengan npm create svelte@latest, pilih template yang sesuai, jalankan npm install, lalu hidupkan server dengan npm run dev. Setelah itu, pahami folder dasar seperti src/routes, src/lib, dan static agar Anda bisa mulai development tanpa menebak-nebak struktur project.

Jika terjadi error, jangan langsung mengubah banyak konfigurasi. Cek dulu hal paling dasar: versi Node.js, port yang dipakai, dan hasil output terminal. Dalam banyak kasus, masalah setup awal SvelteKit berasal dari environment, bukan dari framework-nya sendiri.

Dengan langkah di atas, Anda seharusnya sudah bisa menjalankan SvelteKit di local dan siap melanjutkan ke tahap pengembangan aplikasi yang sebenarnya.