Macam mana nak install projek SvelteKit? Ikuti 12 langkah mudah cara install SvelteKit 2 di PC/laptop anda menggunakan Vite:

1. Pastikan kita sudah ada Terminal (macOS/Linux) atau gunakan Git Bash (Windows) untuk run command.

2. Lepas tu, kita perlukan NodeJS (run-time environment).
Boleh gunakan nvm (Node Version Manager) atau download installer Nodejs daripada laman web nodejs.org
Nodejs ni dah install sekali dengan npm (Node Package Manager) untuk kita install apa-apa npm package yang diperlukan.
Buka Terminal/CMD. Semak versi Node JS sama ada sudah tersedia di dalam laptop kita:

node -v && npm -v

3. Kemudian, kita boleh gunakan Visual Studio Code (atau apa-apa code editor) untuk edit source code di dalam projek SvelteKit kita. Semak versi VS Code sama ada sudah tersedia di dalam laptop kita:

code -v
check version Visual Studio Code

Dah ada 3 tool asas ni? Cukup!

Saya nak letak folder projek ni dalam Desktop dengan nama sveltekit2024

4. Sekarang, kita akan gunakan Vite untuk install SvelteKit. Buka terminal. Run command

npm create vite@latest sveltekit2024

5. Jika keluar prompt
Need to install the following packages: create-vite@[latest-version]
sebegini (untuk first time Vite user), taip ‘y’ untuk proceed.

6. Bila diminta untuk pilih framework, boleh pilih Svelte

terminal select a framework SvelteKit

7. Kemudian kita diminta untuk pilih variant. Yang ini kita pilih SvelteKit.

8. Jika keluar prompt
Need to install the following packages: create-svelte@[latest-version]
sebegini (untuk first timer yang baru install SvelteKit), taip ‘y’ untuk proceed.

terminal install create-svelte

9. Kemudian, untuk Svelte app template, saya pilih SvelteKit demo app. Boleh pilih mana-mana, ikut preference masing-masing.

terminal select sveltekit template

10. Kalau nak guna type checking feature, atau nak code dalam Typescript, boleh pilih dekat sini. Untuk permulaan, saya pilih No.
Untuk additional options pun, saya klik Enter tanpa select mana-mana feature tambahan.

terminal select typescript type checking
terminal sveltekit additional options
terminal SvelteKit using vite done scaffolding

11. Bila dah selesai muat turun & scaffolding, masuk ke folder sveltekit2024 tersebut. Run

cd sveltekit2024
npm install
npm run dev

untuk test dalam mode development.

12. Klik http://127.0.0.1:5173 (localhost, port 5173 – atau port lain yang available) dan lihat paparan utama projek SvelteKit di web browser.

terminal npm run dev sveltekit vite

Siap! Sekarang kita boleh mulakan pembangunan aplikasi web menggunakan SvelteKit.

Seterusnya, kita akan belajar mengenai struktur projek SvelteKit yang sudah kita install. Nantikan entri akan datang!

Svelte Kit Demo Page