Tutorial ini saya buat karena mengalami problem saat deploy di subfolder. perlu diketahui struktur folder saya adalah :

• File Laravel terletak di ~home/user/laravel-app
• Sedangkan isi folder public terletak di public_html/blog

Penyebab error ini karane isi folder public diletekkan di subfolder /blog . Andaikan diletakkan di root public_html problem ini tidak akan muncul. Secara umum problemnya adalah :

1. Vite tidak bisa menemukan assetnya dengan error 404
2. Livewire tidak bisa menemukan asset js-nya
3. Livewire tidak bisa menjalankan url update

Berikut cara resolve tiga problem diatas untuk laravel 12 yang menggunakan livewire + vite

Problem 1: Vite tidak bisa menemukan assetnya dengan error 404

Buka file vite.config.js dan tambahkan key base seperti dibawah ini dengan value /blog/build/ tentu saja nama blog disesuiakan dengan nama subfoldernya

export default defineConfig({
    plugins: [
        ..........................................
    ],
    base: '/blog/build/',
    resolve: {
        .........................................
    },
});

Setelah itu lakukan build ulang agar base bisa diperbarui.

Langkah opsional jika menggunakan git, agar folder public/build bisa terupload saat melakukan git push. maka edit file .gitignore  dan hilangkan text /public/build jika ada.

Apakah setting ini berpengaruh saat develop di local ? Tidak. setting ini hanya dijalankan saat perintah npm run build saja bukan saat perintah npm run dev

Problem 2 & 3 : Livewire tidak bisa menemukan asset js-nya & URL update

Masalah subfolder adalah masalah path. Sedangkan setting ini berada di laravel maka perubahan path akan mempengaruhi proses saat develop dan saat deploy oleh karenya kita butuh file konfigurasi yang independent yaitu file .env sehingga nanti saat deploy file .env di server yang harus disesuaikan bukan di local. sekarang saatnya buka file .env dan tambahkan beberapa variabel ini, tapi contoh ini hanya gunakan pada file .env yang di server bukan di local

APP_URL=https://domain.com/blog
ASSET_URL=https://domain.com/blog
#isi bagian ini jika project di deploy di subfolder misal: /blog
SUBFOLDER=/blog

Selanjutnya buka file routes/web.php dan saatnya resolve path asset livewire dan url update livewire dengan menambahkan code di bawah ini. Saya biasanya meletakkan di paling atas karena alasan kemudahan saja saat maintain. bukan hal teknis

// Untuk resolve URL update
Livewire::setUpdateRoute(function ($handle) {
    return Route::post(env('SUBFOLDER').'/livewire/update', $handle)->name('custom-livewire.update');
});

// Untuk resolve path assets livewire
Livewire::setScriptRoute(function ($handle) {
    return Route::get(env('SUBFOLDER').'/livewire/livewire.js', $handle);
});

Sekilas route diatas tampak mirip tapi yang membedakan untuk setUpdateRoute() returnnya menggunakan name route . Saya pernah coba hilangkan name route-nya dan hasilnya error sedangkan di laravel 10 tidak ada masalah.

Bisa jadi resolve diatas tidak sesuai dengan versi laravel yang lain. Oleh karenanya saya memberi judul secara spesifik pada laravel 12