Docs Deploy Framework Vue.js

Cara Hosting Aplikasi Vue.js

Hostifame menyediakan lingkungan deployment khusus untuk ekosistem Vue.js. Sistem kami mendukung 2 metode instalasi secara fleksibel (Auto-Build dan Pre-Built) untuk merakit aplikasi Single Page Application (SPA) Anda agar berjalan dengan sangat cepat.

1. Persiapkan File Proyek (.ZIP) & Aturan Wajib

Untuk memastikan proses upload berjalan sangat cepat dan tidak mengalami kegagalan (timeout), Anda hanya perlu mengunggah Source Code murni dari proyek Vue.js Anda.

Benar & Cepat

Apa yang Harus Di-ZIP?

Kompres seluruh file kodingan proyek Anda seperti folder src, public, serta file konfigurasi seperti package.json, vite.config.js, atau index.html.

Ukuran Ringan: Tanpa folder dependensi dan file build lokal, ukuran file ZIP Anda umumnya hanya sekitar 1 - 3 MB sehingga upload selesai dalam hitungan detik!

Dilarang Keras

Jangan Sertakan Folder Ini!

Pastikan Anda TIDAK MENGIKUTSERTAKAN folder-folder di bawah ini ke dalam file .ZIP Anda:

❌ /node_modules (Ratusan megabyte library)
❌ /dist (Folder hasil build lokal)

Menyertakan folder ini akan membuat file ZIP bengkak hingga ratusan MB dan menyebabkan proses upload macet atau gagal.

2. Unggah & Deteksi Otomatis

Masuk ke Dasbor Hostifame dan klik tombol Tambah Proyek. Pilih file ZIP yang sudah Anda siapkan. Setelah Anda menyimpan formulir, algoritma CI Analysis kami akan memindai file package.json Anda untuk mengenali bahwa ini adalah proyek Vue.js.

3. Proses Build (Deployment) di Server

Klik tombol Deploy pada Dasbor. Karena Anda mengunggah kodingan mentah, Agen Server kami akan menjalankan proses instalasi modul dan kompilasi di latar belakang (npm install dan npm run build) yang memakan waktu sekitar 1-2 menit.

Fitur Auto-Cleanup: Hemat Kuota Disk!

Setelah proses build berhasil menciptakan folder statis (dist), Hostifame akan secara otomatis menghapus folder node_modules dan cache milik Anda. Hal ini dilakukan agar kuota penyimpanan server Anda tidak terbebani oleh ratusan modul Javascript yang sudah tidak terpakai lagi di mode Production.

4. Environment Variables (.env)

Vue.js memiliki aturan awalan (prefix) khusus agar variabel dapat dibaca oleh sisi klien (browser). Buat file .env melalui Web File Manager Hostifame sebelum melakukan Deploy, atau edit file yang sudah ada.

.env

# Jika Anda menggunakan Vite (Gunakan prefix VITE_):
VITE_API_BASE_URL="https://api.domainanda.com"
VITE_APP_TITLE="Web Frontend Vue"

# Jika Anda menggunakan Vue CLI / Webpack (Gunakan prefix VUE_APP_):
VUE_APP_API_BASE_URL="https://api.domainanda.com"

Peringatan: Perubahan Environment

Karena kompilasi Vite/Webpack menanamkan (hardcode) nilai .env secara permanen ke dalam file statis Javascript, perubahan yang Anda lakukan pada file .env melalui File Manager tidak akan langsung berefek pada web Anda.

Untuk menerapkan nilai environment yang baru, Anda WAJIB merakit ulang aplikasi Anda dengan menekan tombol NPM Run Build yang tersedia di File Manager pada proyek Anda!

5. Optimalisasi Nginx Otomatis

Begitu proses deployment selesai, Nginx Web Server kami akan melayani aplikasi Vue Anda dengan dua fitur premium yang tertanam secara otomatis:

1. Vue Router Fallback (SPA)

Jika Anda menggunakan createWebHistory(), Anda tidak akan lagi menemukan Error 404 saat me-refresh halaman. Nginx otomatis meneruskan semua routing ke index.html.

2. Static Browser Caching

Sistem memberikan perintah kedaluwarsa (expires 6M) ke browser untuk semua aset statis (CSS, JS, Gambar, Font). Load aplikasi Anda akan terasa instan bagi pengunjung setia!

Sebelumnya Dokumentasi React.js Selanjutnya Dokumentasi Next.js