9 Langkah Cara Install Svelte 4 dengan Vite

Macam mana nak install projek Svelte? Ikuti 9 langkah mudah cara install Svelte 4 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 Svelte kita. Semak versi VS Code sama ada sudah tersedia di dalam laptop kita:

code -v

Dah ada 3 tool asas ni? Cukup!

Saya nak letak folder projek ni dalam Desktop dengan nama svelte2024

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

npm create vite@latest svelte2024

untuk download Svelte 4.

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

7. Kemudian kita diminta untuk pilih variant. Untuk permulaan, tak perlu pilih Typescript atau lain-lain. Jadi, kita pilih Javascript sahaja.

8. Bila dah selesai muat turun & scaffolding, masuk ke folder svelte2024 tersebut. Run

cd svelte2024

npm install

npm run dev

untuk test dalam mode development.

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

Siap! Sekarang kita boleh mulakan pembangunan aplikasi web menggunakan Svelte framework.

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