Is there a thing like hot reload for Filament resources?
First time today, i have started working with Filament. What a blast!
However, i am missing something.
While developing with laravel/inertia/vue, or simply with laravel blade there is awesome thing called hot reloading, where all the changes i do are instantly visible in the browser without reloading.
Does Filament have anything similar to it, so when i change FilamentResource i can see the change instantly without having to reload the page in browser?
Solution:
Jump to solution
I added this to my AdminPanelProvider. It seems to be sufficient to fix the auto-refreshing when using Vite.
33 Replies
I think you could use browsersync for this if you want to reload when you change .php files
Not a hot reload, but maybe it can help...
Thank you Patrick. Much appreciate your time to reply. Will check if this will work for me. Thank you š
Making Vite and Valet play nice together | freek.dev
Yesterday, the Laravel team launched the official vite-plugin. From now on, Vite will be the standard build tool for Laravel. The main benefits are vastly improved build times and a more straightforward API. Want to know more about it? Head over to the official docs. There's also a migration guide to go from Mix to Vite.
When I followed that gui...
Thank you, but i think this is not related to my question š
oke never mind,
vite change without reload page
valet need this code for work together with vite
@codingwisely I just found this in the documentation, maybe it can be useful:
https://filamentphp.com/docs/3.x/tables/installation#automatically-refreshing-the-browser
Simpler than BrowserSync.
Same issue, not work :/
@pboivin thank you, tried that already, unfortunately this is not solving a challenge. In this case Vite is watching on livewire changes, not a filament. Maybe if filament template files are published (which is not recommended) and then tell vite where to watch for changes. ā¤ļø
You can add more paths to the Vite config, like
'app/Filament/**'Maybe i wasn't clear in description š What i am trying to understand is how to change, let's say UserResource form or table in Filament directoy, and see the change in browser instantly š Browser sync would work, but not plays for my need right now š
agree. I dont know where are Filament template files located š
this is what you mean i suppose:
ah
Yes, that
not works too , just tried to add it as app/Filament/**
Ok, I'm not sure unfortunately... I've never used it, just found it in the docs š
i must be missing something, should work that way
thanks man, i ll update here if i find proper solution that works
half work - it does see change in Vite, but page is not reloaded:
Have you tried using
->poll() on your table?Maybe it's because your are on https mode, need extra configuration
Although Filament's documentation mentions that you should use @vite('resources/js/app.js') when using your own Livewire components, Filament itself does not seem to include this. Hence the Vite listener is invoked on your regular pages, but not Filament panels.
You need to configure a custom theme
Solution
I added this to my AdminPanelProvider. It seems to be sufficient to fix the auto-refreshing when using Vite.
This is the way! Thank you niels.
Thanks ! How did you know we have to proceed this way ? Should be definitively in the doc !!!
There is no reload via Vite if you don't add any files via Vite as the Vite client if not added to the site.
So adding any file via Vite solves this.
So simple in fact lol
PHP 8.2.8 required the second parameter to be named as well:
hook: fn (): string => Blade::render(string: "@vite('resources/js/app.js')"),
For me, rendering app.js caused many problems in the console which I couldn't solve, so I simply made an empty js file and called it with the $panel->renderHook() method:
Folks, if it works it works, I guess... but what's the issue with using a custom theme? You get all this and much more room to grow.
The default theme looks awesome
š
Sure, so just leave the defaults. The custom theme just implies taking ownership of the Tailwind + Vite layer.
I'll look into it, thank you