DEV Community

Süleyman Özgür Özarpacı
Süleyman Özgür Özarpacı

Posted on

2

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'),
    ];
}
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay