Apakah teman-teman sudah mengenal laravel-livewire? Ya, laravel-livewire merupakan fullstack framework laravel untuk membuat antarmuka dinamis sederhana, tanpa meninggalkan kenyamanan dengan laravel. Misalkan kita ingin membuat form dinamis atau perhitungan total pembayaran pada cart tanpa refresh halaman, kita hanya perlu meng-coding-nya di php, tanpa perlu coding di javascript. Ini bisa menjadi solusi jika kita ingin membangun website dinamis dengan cepat dan kita hanya seorang diri.
Menggunakan Laravel-Livewire
Saya telah menggunakan laravel-livewire ini di beberapa project saya, seperti di PMWasap, Aplikasi Koperasi, dan tentu saja di web blog ini. Sejauh ini, fitur yang ditawarkan livewire cukup untuk keperluan saya. Sehingga mungkin kedepannya saya akan tetap menggunakan livewire, jika memang dari pelanggan tidak mewajibkan untuk menggunakan stack-tech khusus seperti VueJs atau Reactjs.
Preview Image Not Found
Seperti yang telah saya bicarakan di atas, saya juga menggunakan laravel-livewire di web blog ini. Akhirnya saya menemukan satu issue, yaitu preview image di bagian manajemen post tidak berjalan sebagaimana mestinya, saya mendapatkan response header 404 dari server. Masalah ini tidak muncul di local environment, hanya terjadi di server web ini. Langkah yang saya lakukan ialah melakukan debug dengan developer tools browser dan mengakses langsung url yang dihasilkan oleh livewire untuk preview image (temporary url) dan hasilnya adalah unauthorize. Lalu, saya periksa di server, apakah penyebabnya adalah gagal upload karena issue permission? Ya, nampaknya issue permission, kemudian saya ubah permission folder storage laravel ke user dan group nginx
chown nginx:nginx -R storage
Penyebab Pertama Teratasi
Setelah melakukan perintah tersebut di console server, permission folder storage menjadi writtable oleh web server, dan file gambar postingan bisa ter-upload di server, namun issue utamanya belum teratasi. Preview Image masih mendapatkan response 404.
Debug Lanjutan
Langkah selanjutnya adalah mencari issue serupa di internet, saya mencari dan mendapatkan isue serupa di forum laravel-livewire, tapi tidak ada jawaban. Lalu saya mencarinya di issue github repo dari laravel-livewire dan mendapatkan issue ini https://github.com/livewire/livewire/issues/1713. Thread starter pada issue tersebut menceritakan bahwa issue preview image not found muncul jika web server nginx miliknya menerapkan config cache, dan kebetulan web server yang saya gunakan juga nginx. Saya baca thread issue tersebut dan akhirnya menemukan solusi, yaitu dengan menambahkan config khusus livewire path di server block.
location ^~ /livewire {
try_files $uri $uri/ /index.php?$query_string;
}Benar saja, saya tambahkan script config tersebut ke server block domain ibnuis.dev dan wholaa, preview image livewire bisa berjalan sebagaimana mestinya.
Terima kasih telah berkunjung dan membaca postingan ini, jangan lupa untuk membaca postingan saya yang lain, semoga bermanfaat, :)
---
Happy Debug !!!