Filament•3w ago

Browser refresh not working in new panel

I have created a new panel in my filament app on top of my admin panel. I have added a resource to my new panel, and it seems to work well. But I noticed that when I update my new panel resource code, the admin panel browser tabs are refreshing, but not my new panel browser tabs. So it seems I need to make an extra step to get browser refresh to work with my new panel when vite hot reloads. I could not find anything about this in the Filament documentation, any help is much appreciated.

18 Replies

awcodes•3w ago

Where are the new panel resource files?

nowak•3w ago

My new panel is called Delivery, with id: delivery. My resource file is in app/Filament/Delivery/Resources/GroupOrderResource.php.

awcodes•3w ago

Hmm, I would expect that to work. Do you have a custom theme. Did you restart the dev server after creating the resource?

nowak•3w ago

I do have a custom theme here resources/css/filament/admin/theme.css , maybe this is what is causing the admin panel to reload in the first place, and since the the delivery panel doesn't have a theme, no browser refresh is happening there? Do you mean vite or the dev webserver (Herd)?

awcodes•3w ago

Npm run dev (Vite)

nowak•3w ago

Yes I have npm run dev running, and I did restart it as well

awcodes•3w ago

Did you add the custom theme to the new panel as well?

nowak•3w ago

No I have not had a need for one yet. Would you recommend me to add one anyway?

awcodes•3w ago

Just seems like Vite isn’t picking up the refresh paths. And I thinking it’s because you new panel isn’t using any thing that would trigger it to reload. You could try adding the path manually to the Vite config if it’s not going to use a custom theme.

nowak•3w ago

I tried to add ->viteTheme('resources/css/filament/admin/theme.css') to my delivery panel service provider, and now the browser refreshes. That explains it!

awcodes•3w ago

The content key in the tailwind config tells Vite to watch those paths. 🙂 Like I said you could add the path in Vite.config.js too. Ie

refresh: [
    ...refreshPaths,
    'app/Filament/Delivery/**'
],

refresh: [
    ...refreshPaths,
    'app/Filament/Delivery/**'
],

Either way though.

nowak•3w ago

Currently I have:

refresh: true,

refresh: true,

Can I just change this to:

refresh: [
  ...refreshPaths,
  'app/Filament/Delivery/**'
],

refresh: [
  ...refreshPaths,
  'app/Filament/Delivery/**'
],

awcodes•3w ago

Yes. You just need to make sure to import and merge in refreshPaths from the laravel-vite-plugin

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

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

But I would assume you’d want the same custom theme for both panels if not another custom theme for that specific panel. But whatever you need for your app. You could add app/Livewire/** there too to live reload livewire class changes too.

nowak•3w ago

Hmm.. When I add all this to my vite.config.js:

import { defineConfig } from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/js/app.js',
        'resources/css/filament/admin/theme.css',
      ],
      refresh: [
        ...refreshPaths,
        'app/Livewire/**',
        'app/Filament/Delivery/**'
      ],
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
});

import { defineConfig } from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/js/app.js',
        'resources/css/filament/admin/theme.css',
      ],
      refresh: [
        ...refreshPaths,
        'app/Livewire/**',
        'app/Filament/Delivery/**'
      ],
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
});

The browser does not refresh at all when the vite server hot reloads, when I update my resource code. Strange.. I will just add a theme to my delivery panel, as that works 😄

awcodes•3w ago

Hmm, I would expect it to. Weird. At least there’s a simple solution. 😆 Maybe because it still needs a @vite directive somewhere on the layout to work. 🤔

nowak•3w ago

I am happy to try, but I am not sure where to add what exactly.

awcodes•3w ago

Just stick with the theme. It’s easy enough. I would recommend creating a separate one for the new panel though even if they are the same, just in case there could be things in one panel that need to be different in the other. Don’t want to change something in admin that breaks the new one stylistically by accident. There should be a —panel flag for filament:theme command Just give it the id of the new panel and add it your Vite inputs.

nowak•3w ago

Thanks! I will add a separate theme for the new panel 🙂

Gaming

Programming

Browser refresh not working in new panel