Laravel Filament ve Vite.js ile Hot Reloading Kullanımı

yazar

Geliştiriciler için zaman ve verimlilik büyük önem taşır. Bu nedenle, Laravel ve Filament ile backend geliştirirken Vite.js gibi güçlü araçları kullanarak hot reloading konseptine nasıl başlanacağını anlamak, geliştirme süreçlerini hızlandırabilir ve daha akıcı hale getirebilir.

Vite, geliştirme deneyimini önemli ölçüde artıran hızlı bir frontend yapı aracıdır. Laravel ile birleştirildiğinde, kod değişiklikleri yapıldığı anda tarayıcının otomatik olarak bu değişiklikleri arayüze yansıtmasını sağlar.

Bu blog yazısında, Laravel’in sağladığı güçlü sunucu taraflı yeteneklerini, Filament paketinin form, tablo, admin panel ve daha birçok bileşenlerini ve Vite.js’in hızlı, modern bir yapı oluşturma potansiyelini bir araya getirerek, web uygulamalarında hot reloading’in nasıl kullanılabileceğini açıklayacağım.

Laravel Vite Eklentisi

Varsayılan olarak Laravel Vite eklentisi her değişiklik yapıldığında sayfayı yeniler. Ancak değişiklik yapılan bileşen veya sayfadaki herhangi bir elementin kendisini yenilemez.

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**', // Custom Livewire components
                'app/Filament/**', // Filament Resources
            ],
        }),
    ],
});

Vite Livewire Eklentisi (Önerilen)

Vite Livewire eklentisi ise, her değişiklik yapıldığında bileşen veya sayfadaki herhangi bir elementin kendisini yeniler. Bu sayede sayfanın tamamının yenilenmesine gerek kalmaz.

Bu eklentiyi kullanabilmek için npm install --save-dev @defstudio/vite-livewire-plugin komutu çalıştırılmalı ve ardından eklenti app.js dosyasında çağrılmalıdır.

// resources/js/app.js
import './bootstrap';
// eklentiyi çağırıyoruz aşağıdaki satılar ile
import { livewire_hot_reload } from 'virtual:livewire-hot-reload'
livewire_hot_reload();
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
import livewire from '@defstudio/vite-livewire-plugin'; // yüklediğimiz eklentiyi import ediyoruz.

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: false,
        }),

        livewire({
            refresh: [
                ...refreshPaths, // app.js çağrıldığı her yerdeki değişiklikler izleniyor
                'app/Http/Livewire/**', // LiveWire bileşenlerini izlemek için (varsa)
                'app/Custom/Path/**', // vite aracının takip etmesini istediğiniz dosyaların yolunu gösterebilirsiniz.
            ]
        }),
    ],
})

Filament Entegrasyonu

Değişikliklerin Vite tarafından takip edilebilmesi için app.js dosyasının Filament paneline eklenmesi gereklidir. Bu işlem iki farklı yöntemle yapılabilir:

  • AppServiceProvider → register() yönteminde
use Filament\Support\Facades\FilamentView;
use Illuminate\Support\Facades\Blade;

public function register()
{
    FilamentView::registerRenderHook('panels::body.end', fn(): string => Blade::render("@vite('resources/js/app.js')"));
}
  • AdminPanelProvider → renderHook() yönteminde.
<?php

namespace App\Providers\Filament;
...
...
use Illuminate\Support\Facades\Blade;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->login()
            ->colors([
                'primary' => Color::Amber,
            ])
            ...
            ...
            ->collapsibleNavigationGroups(false)
            ->renderHook('panels::body.end', fn (): string => Blade::render("@vite('resources/js/app.js')"))
						...
						...
						...
    }
}

Yukarıdaki adımlar tamamlandıktan sonra Vite aracını ve Laravel artisan sunucusunu çalıştırarak hot reloading özelliğin aktif edildiğini görmüş olacağız.

npm run dev // vite sunucusunun çalıştırılması
php artisan serve // Laravel artisan sunucusunun çalıştırılması

Not: Herhangi bir sorunla karşılaşmadığınız halde hot reloading çalışmıyorsa php artisan optimize komutunu çalıştırarak Laravel uygulamasını optimize edip sorunu çözebilirsiniz.

Yorum yapın