Hosting Vite

Vite membuat proyek React, Vue, Svelte, Solid, dan JavaScript biasa menjadi folder file statis, dist/. Lobsite meng-host folder itu. Jalankan npm run build, lalu npx lobsite, dan aplikasi aktif di alamat *.lobsite.app dengan HTTPS. Jika aplikasi memiliki routing sisi klien, satu pengaturan membuat deep link berfungsi.

Membuat game browser dengan template Vite? Panduan hosting Phaser mencakup aset game, ukuran kanvas, dan build pengujian permainan di samping alur kerja penerapan ini.

Cara kerjanya

1. Build dengan npm run build (yaitu vite build). Aplikasi masuk ke dist/, dengan file ber-hash di dist/assets/.
2. Jalankan npx lobsite di proyek. Perintah ini melakukan deploy dist/, bukan public/, yang sudah disalin Vite ke build. Deploy pertama tidak memerlukan akun dan bertahan 6 jam.
3. Aktifkan mode satu halaman jika aplikasi memiliki router: tambahkan spa = true ke lobsite.toml, atau aktifkan Aplikasi satu halaman di pengaturan situs. Lalu simpan situs dengan tautan klaim, di akun gratis.

Routing dan mode satu halaman

Aplikasi Vite dengan React Router, Vue Router, atau TanStack Router memiliki satu index.html. Membuka /settings langsung meminta file yang tidak ada kepada server. Dengan mode satu halaman aktif, Lobsite menjawab path itu dengan index.html Anda, dan router menggambar halaman:

# lobsite.toml
spa = true

Hanya permintaan halaman yang mendapat aplikasi. File yang hilang seperti /assets/index-3f9a.js lama mendapat 404 sungguhan, sehingga pengunjung yang masih membuka versi sebelumnya setelah deploy mendapat error yang jelas, bukan HTML menggantikan skrip. Deploy mencetak tips jika package.json memiliki router dan mode satu halaman nonaktif. Selengkapnya di dokumentasi.

vite.config dan build

• base tetap pada bawaannya, /: aplikasi disajikan dari tingkat atas alamatnya. Setel hanya untuk situs proyek GitHub Pages, lalu hapus saat pindah.
• Variabel lingkungan yang diawali VITE_ ditulis ke build. Variabel itu terlihat oleh siapa pun yang membuka aplikasi, jadi jangan masukkan rahasia; file .env sendiri tidak pernah di-deploy.
• Beberapa halaman (build.rollupOptions.input dengan lebih dari satu file HTML) adalah situs multi-halaman: setiap halaman berupa file, dan mode satu halaman tidak diperlukan.
• npm run preview menyajikan dist/ secara lokal, yang merupakan pemeriksaan tercepat sebelum deploy.

Caching file ber-hash

Vite menaruh hash isi setiap file di namanya, seperti index-3f9a.js, sehingga file dengan nama tertentu tidak pernah berubah. Lobsite juga menyimpan file berdasarkan isi, sehingga deploy hanya mengunggah chunk yang berubah. Agar browser menyimpan file itu selama setahun, tambahkan aturan header:

[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"

index.html selalu diperiksa lagi, sehingga pengunjung mendapat versi baru segera setelah deploy.

Perbandingan host Vite

Netlify dan Vercel membuat dari Git dan menjalankan fungsi server. Lobsite adalah cara tercepat menayangkan aplikasi Vite hasil build dari komputer, CI, atau agen AI Anda, dengan routing satu halaman yang hanya satu baris atau satu klik.

Pertanyaan umum

Mengapa halaman aplikasi Vite selain beranda menampilkan "Not found"?

Aplikasi memakai routing sisi klien, dan server tidak memiliki file untuk path itu. Aktifkan mode satu halaman: spa = true di lobsite.toml, atau Aplikasi satu halaman di pengaturan situs.

Apakah Lobsite menjalankan build Vite saya?

Tidak. Build di komputer Anda atau di CI, lalu deploy dist/. Apa yang Anda periksa dengan npm run preview adalah persis yang tayang.

Bisakah saya memakai variabel lingkungan Vite?

Ya, yang berawalan VITE_, yang ditulis ke build saat Anda menjalankannya. Build lagi setelah mengubahnya. Apa pun yang rahasia harus berada di server, bukan di aplikasi Vite.

Apakah situs multi-halaman Vite memerlukan mode satu halaman?

Tidak. Setiap halaman HTML adalah file sendiri, dan about.html terbuka di /about. Biarkan mode satu halaman nonaktif, agar alamat yang salah ketik mendapat 404.html Anda.