Instantly Reloading Filament V3 Admin Panels with Vite and Livewire

As a developer working with Laravel Filament V3 and Livewire, you know the importance of efficiency and rapid feedback during the development process. However, achieving instant changes in your Filament admin panels alongside your code edits can be quite a challenge. In this article, we will explore how to seamlessly integrate Vite and Livewire hot reloads into your Filament V3 projects, allowing you to witness your changes come to life instantly.

The Power of Vite and Laravel

Vite is a lightning-fast build tool that significantly enhances the development experience. When combined with Laravel, it offers a powerful setup to achieve automatic browser reloads as soon as you make code changes. Let's dive into how you can set up this dynamic duo to streamline your Filament development.

// vite.config.js
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/Livewire/**',
                'app/Filament/**',
            ],
        }),
    ],
});

With this configuration, Vite will diligently watch your specified files and Livewire components for changes, triggering an automatic reload in your browser whenever you make updates.

Bridging the Gap with Filament

However, integrating Vite and Livewire with Filament V3 involves an extra step. While Filament's documentation may not explicitly guide you through this, we've got you covered. To ensure that Vite's listener works seamlessly within Filament panels, follow these steps:

// Providers/Filament/AdminPanelProvider.php
use Filament\Support\Facades\FilamentView;
use Illuminate\Support\Facades\Blade;

public function register()
{
    parent::register();
    FilamentView::registerRenderHook('panels::body.end', fn(): string => Blade::render("@vite('resources/js/app.js')"));
}

By adding this code to your service provider, you're enabling the Vite listener to function correctly within your Filament panels. This bridging step ensures that Livewire hot reloads are effective even in the context of Filament V3.

Enjoy Instant Changes

With your setup complete, you are now ready to experience the magic of instant changes. Here's how you can harness this newfound power:

Start your Laravel development server:

php artisan serve

Open your browser and navigate to your Laravel development URL. Now, as you code in your editor, your Filament admin panels will automatically reload, reflecting your changes without any manual intervention. This seamless integration of Vite, Livewire, and Filament V3 empowers you to focus on your code and see your creations evolve instantaneously.

Conclusion: In this article, we demystified the process of achieving instant code changes in Laravel Filament V3 admin panels. By leveraging the dynamic capabilities of Vite and Livewire, and bridging the gap with Filament, you have unlocked a new level of productivity in your development workflow. Embrace this powerful combination and watch your code come to life effortlessly, bringing your Filament V3 projects to new heights.