Sebagian besar aplikasi React saat ini di-build dengan Vite menjadi folder file statis: satu index.html dan JavaScript yang menggambar setiap halaman. Lobsite meng-host folder itu. Jalankan npm run build, lalu npx lobsite, dan aplikasi aktif di alamat *.lobsite.app dengan HTTPS. Deep link React Router berfungsi setelah mode satu halaman diaktifkan.
Cara kerjanya
- Build aplikasi dengan
npm run build. Proyek Vite menulisdist/; proyek Create React App yang lebih lama menulisbuild/. - Jalankan
npx lobsitedi proyek. Perintah ini menemukan folder build dan melakukan deploy. Deploy pertama tidak memerlukan akun dan bertahan 6 jam. - Aktifkan mode satu halaman untuk React Router:
spa = truedilobsite.toml, atau Aplikasi satu halaman di pengaturan situs. Simpan situs dengan tautan klaim, di akun gratis.
React Router dan deep link
Dengan createBrowserRouter atau <BrowserRouter>, alamat tampak seperti /orders/42. Mengeklik tautan berfungsi di mana saja, karena React Router mengubah halaman di browser. Membuka alamat itu langsung, atau memuat ulang, meminta /orders/42 kepada server, yang bukan file. Mode satu halaman menjawabnya dengan index.html Anda, dan React Router menggambar halaman yang benar.
<HashRouter>(alamat seperti/#/orders/42) berfungsi tanpa mode satu halaman, karena server hanya melihat/. Rute browser tampak lebih baik dan sesuai harapan mesin pencari.- Mode framework React Router dengan
ssr: falsejuga membuat aplikasi satu halaman. Denganprerenderdisetel, halaman yang dicantumkan ditulis sebagai file HTML sendiri, dan mode satu halaman mencakup sisanya. - TanStack Router dan wouter bekerja sama seperti React Router.
Deploy menampilkan tips saat menemukan router di package.json dan mode satu halaman nonaktif.
Beralih dari Create React App
Tim React menghentikan Create React App pada Februari 2025 dan merekomendasikan framework atau Vite untuk aplikasi baru. Proyek CRA tetap dapat di-deploy: npx lobsite menemukan build/, dan melewati public/, yang disalin CRA ke build. Beralih ke Vite mengubah beberapa hal di sisi hosting:
- folder build menjadi
dist/, yang ditemukan dengan cara yang sama; - variabel lingkungan
REACT_APP_menjadiVITE_, dibaca denganimport.meta.env; index.htmlpindah daripublic/ke folder teratas proyek.
Jika aplikasi memerlukan render server, lihat Next.js dengan ekspor statis, atau host yang menjalankan React di server.
spa = true di lobsite.toml, atau satu sakelar di dasbor: deep link membuka aplikasi Anda, file yang tidak ada tetap 404.
File disimpan berdasarkan hash-nya. Deploy ulang situs yang tidak berubah mengunggah 0 byte.
Pratinjau sebelum tayang. Rollback dengan satu klik, termasuk pengalihan.
Setiap situs mendapat alamat *.lobsite.app dengan HTTPS sejak deploy pertama.
Arahkan formulir ke /_lobsite/forms/contact. Termasuk penyaringan spam.
Deploy tanpa akun aktif selama 6 jam. Tautan klaim menyimpannya, gratis.
Perbandingan host React
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Deep link React Router | spa = true, atau sakelar di dasbor |
Aturan _redirects |
Rewrite di vercel.json |
Tidak: HashRouter, atau 404.html disajikan dengan status 404 |
| File skrip hilang setelah deploy | 404, error yang jelas | index.html aplikasi |
index.html aplikasi |
404 |
| Render server | Tidak | Ya, dengan framework | Ya, dengan framework | Tidak |
| Akun sebelum deploy pertama | Tidak: aktif 6 jam, lalu simpan gratis | Ya | Ya | Ya, dan repositori |
| Formulir tanpa backend | Ya, setelah situs ada di akun | Ya | Tidak | Tidak |
| Domain kustom | Ya, gratis | Ya | Ya | Ya |
Untuk aplikasi React yang berjalan di browser, yaitu yang dibuat Vite, Lobsite melakukan deploy dengan satu perintah, hanya mengunggah chunk yang berubah, dan menyimpan URL pratinjau untuk setiap deploy.
Pertanyaan umum
Mengapa memuat ulang halaman React Router menampilkan "Not found"?
Alamat itu hanya ada di dalam aplikasi, sehingga server tidak memiliki file-nya. Aktifkan mode satu halaman dengan spa = true di lobsite.toml, atau Aplikasi satu halaman di pengaturan situs.
Bisakah saya meng-host proyek Create React App di sini?
Ya. Jalankan npm run build dan npx lobsite; folder build/ ditemukan dan di-deploy. Aktifkan mode satu halaman jika memakai React Router dengan rute browser.
Bisakah formulir React mengirim kiriman tanpa backend?
Ya, jika formulir ada di HTML hasil build, misalnya di index.html, dan mengirim ke /_lobsite/forms/contact. Formulir yang hanya digambar React tidak ditemukan saat deploy, dan kirimannya ditolak. Dokumentasi formulir menjelaskan cara menjaga formulir di HTML dan mengirimnya dengan fetch().
Apakah saya perlu Next.js untuk meng-host aplikasi React?
Tidak. Aplikasi React yang di-build dengan Vite adalah file biasa dan berjalan di host statis apa pun. Next.js untuk render server atau halaman prerender, dan memiliki ekspor statis sendiri.