Filament•2y ago

Hot Reloading when using admin panel

Is there away to get vite hot reloading working with the admin panel. As i am not using views and doing changes inside the Helper files i cant seem to get hot reloading with vite working @Dan Harrin

9 Replies

Dan Harrin•2y ago

please dont @ me, be patient. i dont know the answer.

nostrodamnedOP•2y ago

Ok sorry about that Dan, I think i know the reason is that filament doesnt use the normal @vite to load the app.css and app.js, so reloading in filament doesnt work

Dan Harrin•2y ago

its more likely that someone else will be able to help if you send the code you're using

nostrodamnedOP•2y ago

Hi i actually just this second got it working but i had to add @vite(['resources/css/app.css', 'resources/js/app.js']) to the base.blade.php file in order for vite to work properly with hot reloading. I dont really want to use the views as i am doing everything in the resource, but i suppose i can delete the views after development. @Dan Harrin (last mention i promise just as i am replying! )

LeandroFerreira•2y ago

An example here https://filamentphp.com/docs/2.x/forms/installation#vite You may add the filament directory

Filament

Installation - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

nostrodamnedOP•2y ago

For anyone else with this issue this is how i solved it finally (I am using Valet as a note) vite.config file

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import livewire, {defaultWatches}  from '@defstudio/vite-livewire-plugin';

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

        livewire({
            // refresh css (tailwind ) as well
            refresh: ['resources/css/app.css'],
            valetTls: 'tacrmv3.test',
        }),

    ],
});

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import livewire, {defaultWatches}  from '@defstudio/vite-livewire-plugin';

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

        livewire({
            // refresh css (tailwind ) as well
            refresh: ['resources/css/app.css'],
            valetTls: 'tacrmv3.test',
        }),

    ],
});

I then published filament views and deleted all of them (I am using the admin panel) except resources/views/vendor/filament/components/layouts/base.blade.php on that file i added

@vite(['resources/css/app.css', 'resources/js/app.js'])

@vite(['resources/css/app.css', 'resources/js/app.js'])

just before

@livewireStyles

@livewireStyles

then finally on app.js added this

import './bootstrap';
import Alpine from 'alpinejs'
import {livewire_hot_reload} from 'virtual:livewire-hot-reload' //using livewire hot reload //<--Added this
window.Alpine = Alpine

Alpine.start()
livewire_hot_reload(); //<--Added this

import './bootstrap';
import Alpine from 'alpinejs'
import {livewire_hot_reload} from 'virtual:livewire-hot-reload' //using livewire hot reload //<--Added this
window.Alpine = Alpine

Alpine.start()
livewire_hot_reload(); //<--Added this

As i was using livewire vite plugin to preserve state on livewire components. (which is still a bit flakey!) Main thing though is hot reload works

Dan Harrin•2y ago

internally, @vite(...) compiles to (app(Vite::class)(...)) and we do that in the filament core so i dont know how its any different

nostrodamnedOP•2y ago

Thanks Leandro, I got it with the livewire plugin for vite (it does filament and livewire files by default 🙂 ) Thanks though! Not sure it was only way i could get it to work though Dan Oh I am also using Stancl multi tenancy so that "may?"be a factor

Dan Harrin•2y ago

maybe look into how the html is different in the dom

Gaming

Programming

Hot Reloading when using admin panel