Docs
V1
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.

Vite and File Watcher

If you develop your packages and have a package in your Laravel installation that also contains a “vendor” folder, then the file watcher may search for something in this directory.

This can quickly become a drain on resources. With the result that the command npm run dev “JavaScript heap out of memory”

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

There are two ways to solve this problem:

  1. in the laravel composer.json under repositories:

From:

{
  "name": "laravel/your-laravel-project",
  "repositories": {
    "paxsy-verlagys/io": {
      "type": "path",
      "url": "app-packages/io",
      "options": {
        "symlink": true
      }
    }
  }
}

to:

{
  "name": "laravel/your-laravel-project",
  "repositories": {
    "paxsy-verlagys/io": {
      "type": "path",
      "url": "app-packages/io",
      "options": {
        "symlink": false
      }
    }
  }
}

Dont forget to run

composer update

After changing the symlink

Last updated on
Supported Commands