Filament•2mo ago

Can't add scripts to admin panel service provider

I tried adding the scripts as indicated here, but it doesn't appear on any part of the filament admin app. For context, I am on a Laravel 11 app that uses Volt. But the file is still just a JS file sitting in that resources folder. https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files

class AdminPanelProvider extends PanelProvider
{
    public function boot(): void
    {
        FilamentAsset::register([
            Js::make('app', __DIR__ . '/../../../resources/js/app.js'),
        ]);
    }

class AdminPanelProvider extends PanelProvider
{
    public function boot(): void
    {
        FilamentAsset::register([
            Js::make('app', __DIR__ . '/../../../resources/js/app.js'),
        ]);
    }

Solution:

Looks like using asset() is the proper way to do this to prevent copying the files. ``` class AdminPanelProvider extends PanelProvider {...

Jump to solution

19 Replies

LeandroFerreira•2mo ago

you can add it to the AppServiceProvider or use $panel->bootUsing(function(){ ... })

AkimboOP•2mo ago

I did add that to the app service provider. It seemed like that didn't add it either. How would this work in bootUsing? Same call?

LeandroFerreira•2mo ago

did you run php artisan filament:assets ?

AkimboOP•2mo ago

This would be my full AppServiceProvider file. Any other steps to make sure it's imported?

<?php

namespace App\Providers;

use Filament\Support\Assets\Js;
use Filament\Support\Facades\FilamentAsset;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        FilamentAsset::register([
            Js::make('app', __DIR__ . '/../../resources/js/app.js'),
        ]);
    }
}

<?php

namespace App\Providers;

use Filament\Support\Assets\Js;
use Filament\Support\Facades\FilamentAsset;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        FilamentAsset::register([
            Js::make('app', __DIR__ . '/../../resources/js/app.js'),
        ]);
    }
}

I did That puts it in public/js/app/app.js

LeandroFerreira•2mo ago

that's it

AkimboOP•2mo ago

Why's that?

LeandroFerreira•2mo ago

wasn't it imported?

AkimboOP•2mo ago

No, once it's put in there, there's nothing on the admin side that looks for it. The main laravel site is already importing it with Volt. Is there a step to make Filament actually use the assets it finds from there? Is there a main layout page I'm supposed to edit?

LeandroFerreira•2mo ago

if you add a console.log('Hello, world!') to app.js, it should appear on each page in your panel

AkimboOP•2mo ago

I added an alert there but nothing comes up. When I search the inspector, that script isn't loaded.

LeandroFerreira•2mo ago

run php artisan filament:assets clear the cache if you are optimizing Filament, try to run php artisan filament:optimize-clear

AkimboOP•2mo ago

Nothing. I think I will use a widget for now to get the script on the page.

LeandroFerreira•2mo ago

hum.. it should work

AkimboOP•2mo ago

Maybe there's something funky. Just seems like the filament:assets command is moving the file but nothing is doing the automatic import. Maybe this is a difference between how Breeze now sets up Volt apps and what Filament expects the structure to be

LeandroFerreira•2mo ago

If you are able to create a minimal repo on github to reproduce this issue, I can take a look later

AkimboOP•2mo ago

I will try, thank you Having trouble getting scripts to execute in a widget as well. Is there a quick and dirty workaround to just defining a small JS function somewhere?

LeandroFerreira•2mo ago

@script
<script>
    console.log('...');
</script>
@endscript

@script
<script>
    console.log('...');
</script>
@endscript

AkimboOP•2mo ago

Thank you, got it on the widget I'm realizing what happened. They had imports at the top, so filament was trying to load them and ran into an error. Laravel breeze sets up Vite to compile these with babel, but filament obviously doesn't do that. So how should I do this with filament? I don't want to add the outputted vite built JS file to the FilamentAsset because then filament will collect it and put it in the public folder again Or is that fine

Solution

Akimbo•2mo ago

Looks like using asset() is the proper way to do this to prevent copying the files.

class AdminPanelProvider extends PanelProvider
{
    public function boot(): void
    {
        FilamentAsset::register([
            Js::make('app-main', asset('build/app.js')),
            Css::make('custom', asset('build/custom.css')),
        ]);
    }

class AdminPanelProvider extends PanelProvider
{
    public function boot(): void
    {
        FilamentAsset::register([
            Js::make('app-main', asset('build/app.js')),
            Css::make('custom', asset('build/custom.css')),
        ]);
    }

Gaming

Programming

Can't add scripts to admin panel service provider

Did you find this page helpful?