Simplifying Asset Updates in FilamentPHP Packages

For the past week, I’ve been developing a FilamentPHP package, and this process has taught me quite a bit. However, I’d like to share something with you that I couldn’t find in the documentation.

When you run npm run dev during the development of your package, the files are built into the /resources/dist directory at the root of your package. FilamentPHP then moves these files to the public directory of your Laravel project when you execute the php artisan filament:assets command. Therefore, every time you make a change in your FilamentPHP package, you need to run this command in the Laravel project you’re testing on to reflect the updates in the public directory.

But what if I told you there’s an easier way? The magic word here is symlink ✨.

Checking File Names

First, open the service provider file of your package. For my package, this is the FilamentMenuBuilderServiceProvider.php file.

In your getAssets method, ensure that the exported file name matches the actual file name inside your package. This is crucial because when we create the symlink, the Filament panel will look for the file using the exported name. Since I’m only using a CSS file, my code looks like this:

protected function getAssets(): array
{
    return [
        // WRONG!
        Css::make('filament-menu-builder-styles', __DIR__ . '/../resources/dist/filament-menu-builder.css'),

        // CORRECT!
        Css::make('filament-menu-builder', __DIR__ . '/../resources/dist/filament-menu-builder.css'),
    ];
}

For more information, please read the documention.

Creating a Symlink

The process of creating a symlink varies depending on your operating system. Since I’m using Windows, I utilize Link Shell Extension for this purpose.

I symlink the /resources/dist directory to /public/css/{vendor_name}/{package_name} in my Laravel project. For my project, this would be /public/css/biostate/filament-builder. From now on, any changes in the dist folder of my package will automatically reflect in the public directory of my Laravel project.

Conclusion

By leveraging symlinks, you can significantly streamline your development process for FilamentPHP packages. This eliminates the repetitive task of running php artisan filament:assets after every change, allowing you to focus more on building and less on manual updates.