Docs
Tipps

Tipps

Hot Module Reload HMR

During development and you are using npm run dev, you can also apply hot module reload HMR to your packages.

If you want to use changes for a complete package stack, enter the following lines in the Laravel host vite.config.js file:

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

export default defineConfig({
    server: {
        hmr: {
            host: 'your-localhost',
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'packages/**',
                'app-paxsy/**'
            ]
        }),
    ],
});

For a single package:


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

export default defineConfig({
    server: {
        hmr: {
            host: 'your-localhost',
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app-paxsy/your-package/**'
            ]
        }),
    ],
});

FilamentPHP

For FilamentPHP package development, you have to attach the “hmr” into the page

class YourPackageServiceProvider extends PanelProvider
{

    public function register(): void
    {      
        parent::register();

        Raiser::forProvider($this)
              ->loadConfigs()
        ;
    
         // only for not production
        'production' === config('app.env') ? null :
            FilamentView::registerRenderHook('panels::body.end',
                fn(): string => Blade::render("@vite('resources/js/app.js')"));

}

Have a look at https://github.com/fatihdurmaz/filament-hot-reloading-guide with a perfect tutorial.

Last updated on
ConfigurationOptions