Deploy React JS Vite to cPanel

Panduan lengkap untuk mengupload dan menjalankan project React JS dengan Vite di hosting cPanel.

Pendahuluan

Anggaplah sudah berhasil membuat aplikasi React Vite pada local device sobat dan berfungsi dengan normal.

Langkah 1: Konfigurasi Vite

Buka file vite.config.js di project Anda dan tambahkan konfigurasi base:

• Jika deploy di subfolder (domain.com)

export default defineConfig({ 
 plugins: [react()], 
 base: '/',
})

• Jika deploy di subfolder (domain.com/app):

export default defineConfig({ 
 plugins: [react()], 
 base: '/app/',
 })

Langkah 2: Build Project

Jalankan perintah build di terminal:

npm run build

Perintah ini akan membuat folder dist/ yang berisi file production-ready:

Langkah 3: Compress File Dist

1. Buka folder `dist/`

2. Select semua file dan folder di dalamnya (index.html, assets/, dll)

3. Compress menjadi file ZIP (misalnya: dist.zip)

Penting: Yang di-zip adalah ISI folder dist, bukan folder dist itu sendiri

Langkah 4: Upload ke cPanel

1. Login ke cPanel
2. Buka File Manager
3. Navigate ke folder tujuan:
– Untuk root: `public_html/`
– Untuk subfolder: `public_html/app/`
4. Upload file `dist.zip`
5. Klik kanan pada file zip → Extract
6. Hapus file zip setelah extract selesai

Langkah 5: Buat File .htaccess

Buat file `.htaccess` di folder yang sama dengan index.html:

Untuk root domain:

RewriteEngine On
RewriteBase / 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

Untuk subfolder (/app/):

RewriteEngine On
RewriteBase /app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

Langkah 6: Testing