thumnail

Setup Project: Instalasi Node.js, Vite/SvelteKit, dan VS Code Hari ke2

Sun, May 2025 19:10:22

Dalam dunia pengembangan web modern, efisiensi dan kecepatan sangatlah penting. Salah satu cara terbaik untuk mencapai hal tersebut adalah dengan menggunakan teknologi dan alat bantu yang tepat sejak awal. Artikel ini akan membahas secara lengkap cara melakukan setup proyek modern menggunakan Node.js, Vite/SvelteKit, dan Visual Studio Code (VS Code). Dengan panduan sepanjang 3000 kata ini, diharapkan kamu dapat dengan mudah memahami dan mengimplementasikan lingkungan kerja yang efisien, cepat, dan nyaman untuk pengembangan aplikasi web modern.

1. Pendahuluan

Sebelum memulai proses instalasi dan konfigurasi, kita perlu memahami terlebih dahulu apa itu Node.js, Vite, SvelteKit, dan VS Code.

Apa itu Node.js?

Node.js adalah runtime JavaScript yang dibangun di atas mesin V8 milik Chrome. Node.js memungkinkan kamu untuk menjalankan kode JavaScript di luar browser. Hal ini sangat berguna dalam pengembangan backend maupun sebagai lingkungan pengembangan frontend modern.

Apa itu Vite?

Vite adalah build tool modern yang sangat cepat dan ringan. Ia menggunakan ESM (ES Modules) dan server pengembangan berbasis native yang memberikan pengalaman developer yang sangat cepat.

Apa itu SvelteKit?

SvelteKit adalah framework yang dibangun di atas Svelte untuk membangun aplikasi web yang memiliki server-side rendering (SSR), static site generation (SSG), dan client-side rendering (CSR) dalam satu tempat. Ia merupakan generasi terbaru dari cara membangun aplikasi Svelte secara penuh.

Apa itu Visual Studio Code (VS Code)?

VS Code adalah text editor modern dan open-source yang mendukung berbagai bahasa pemrograman dan teknologi. Ia memiliki banyak ekstensi dan fitur-fitur modern seperti IntelliSense, debugging, dan integrasi Git.

2. Instalasi Node.js

Langkah pertama adalah menginstal Node.js di komputer kamu.

Langkah-langkah:

  1. Buka website resmi Node.js di https://nodejs.org
  2. Pilih versi LTS (Long Term Support) untuk kestabilan proyek.
  3. Unduh installer sesuai sistem operasi kamu (Windows, macOS, atau Linux).
  4. Jalankan installer dan ikuti instruksi di layar.

  5. Setelah instalasi selesai, buka terminal atau command prompt dan ketik:

    node -v
npm -v

    Perintah ini akan menampilkan versi Node.js dan npm yang sudah terinstal.

3. Setup VS Code

Instalasi editor VS Code sangat disarankan karena menyediakan banyak fitur yang membantu pengembangan.

Langkah-langkah:

  1. Kunjungi https://code.visualstudio.com
  2. Unduh versi terbaru untuk sistem operasi kamu.
  3. Instal seperti biasa.
  4. Setelah terinstal, buka VS Code dan mulai eksplorasi:
    • Extensions: Cari dan instal ekstensi seperti:
      • Svelte for VS Code
      • Prettier - Code Formatter
      • ESLint
      • Vite
    • Settings Sync: Aktifkan agar pengaturan tersimpan ke cloud dan bisa diakses di perangkat lain.

4. Membuat Proyek SvelteKit dengan Vite

SvelteKit menggunakan Vite sebagai build tool, jadi kita bisa langsung menggunakan perintah dari Vite.

Langkah-langkah:

  1. Buka terminal dan arahkan ke folder tempat kamu ingin membuat proyek.

  2. Jalankan perintah berikut:

    npm create svelte@latest nama-proyek-anda
  3. Kamu akan ditanya beberapa pertanyaan:
    • Template: Pilih "Skeleton project"
    • TypeScript: Ya/Tidak sesuai preferensi
    • ESLint: Ya untuk kualitas kode
    • Prettier: Ya untuk konsistensi format
    • Playwright dan Vitest: Optional

  4. Masuk ke direktori proyek:

    cd nama-proyek-anda

  5. Instal dependensi:

    npm install

  6. Jalankan server pengembangan:

    npm run dev
  7. Buka browser dan akses http://localhost:5173

5. Struktur Folder SvelteKit

Setelah proyek dibuat, berikut adalah struktur umum foldernya:

my-sveltekit-app/
├── src/
│   ├── lib/        # Komponen dan utilitas
│   ├── routes/     # Halaman dan API
│   └── app.html    # Template HTML
├── static/         # File statis seperti gambar
├── svelte.config.js
├── vite.config.js
├── package.json
└── tsconfig.json / jsconfig.json

Folder routes akan menjadi pusat navigasi aplikasi kamu. File +page.svelte atau +page.ts digunakan untuk membuat halaman.

6. Membuat Halaman dan Komponen Pertama

Untuk membuat halaman baru:

  1. Masuk ke folder src/routes
  2. Buat folder baru misalnya about
  3. Di dalamnya, buat file +page.svelte:
<script>
  let message = 'Ini adalah halaman About';
</script>

<h1>{message}</h1>

Untuk membuat komponen:

  1. Masuk ke src/lib
  2. Buat file misalnya Hello.svelte:
<script>
  export let name = 'Dunia';
</script>

<p>Halo, {name}!</p>
  1. Gunakan komponen di halaman manapun:
<script>
  import Hello from '$lib/Hello.svelte';
</script>

<Hello name="Pengguna" />

7. Manajemen Paket dan Dependensi

Untuk menambahkan pustaka pihak ketiga:

npm install nama-paket

Contoh:

npm install axios

Gunakan di file .svelte atau .ts:

import axios from 'axios';

8. Debugging dan Formatting

Gunakan fitur Debugging dari VS Code dengan menambahkan file konfigurasi .vscode/launch.json. VS Code juga secara otomatis mendeteksi kesalahan sintaks jika ESLint dan Prettier aktif.

9. Build dan Deploy

Untuk mem-build aplikasi:

npm run build

Folder build/ akan berisi versi produksi dari aplikasi.

Untuk deploy:

npm install -D @sveltejs/adapter-static

Ubah svelte.config.js:

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter()
  }
};

10. Tips dan Trik Tambahan

Penutup

Dengan setup ini, kamu sudah siap untuk memulai pengembangan aplikasi web modern yang cepat, efisien, dan fleksibel. Kombinasi Node.js, Vite/SvelteKit, dan VS Code memberikan fondasi yang kuat untuk proyek apapun, baik skala kecil maupun besar. Jangan lupa untuk terus belajar dan bereksperimen dengan fitur-fitur lanjutan SvelteKit untuk mendapatkan performa dan pengalaman pengguna yang optimal.

Selamat berkarya!