Vite adalah salah satu build tool modern yang banyak digunakan untuk proyek JavaScript seperti Vue, React, dan Vanilla JS. Ketika ingin melakukan deploy ke shared hosting berbasis cPanel, kamu perlu melakukan proses build, lalu mengupload isi folder dist ke file manager cPanel.
1. Persiapan Project Vite
Pastikan project sudah siap dan berjalan normal di mode development.
npm install
npm run dev
2. Melakukan Build Project Vite
Proses build akan menghasilkan folder dist, yaitu folder yang berisi file statis siap upload.
Jalankan perintah berikut:
npm run build
Setelah itu, akan muncul folder:
/dist
├── index.html
├── assets/
└── …
3. Upload Folder dist ke File Manager cPanel
Ikuti langkah-langkah berikut:
- Login ke cPanel.
- Buka menu File Manager.
- Masuk ke direktori publik, biasanya:
- public_html (untuk domain utama), atau
- public_html/namasubdomain (jika deploy ke subdomain).
- Hapus file lama jika ada (opsional).
- Upload seluruh isi folder dist, bukan folder dist-nya.
- Artinya upload file index.html, folder assets, dan file lainnya langsung ke root hosting.
4. Tambahkan File .htaccess Agar Routing Vite SPA Berjalan Normal
Jika aplikasi kamu menggunakan routing berbasis frontend (SPA), seperti:
- React Router
- Vue Router
- Svelte SPA Router
- Vanilla SPA
maka kamu wajib membuat file .htaccess.
Buat file .htaccess pada direktori tempat kamu upload file hasil build, lalu isi dengan:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /# Jika file atau folder tidak ditemukan
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d# Arahkan semua ke index.html
RewriteRule ^ index.html [QSA,L]
</IfModule>
5. Test Website Setelah Upload
Setelah upload, coba akses:
- https://domainkamu.com/
- https://domainkamu.com/halaman-apa-saja
Jika .htaccess bekerja dengan benar, maka semua route akan menampilkan aplikasi Vite dengan baik.