Jan 9, 2024

Level 35

Filament in subdirectory

I am using Filament 3.x and my base url is https://myapp.com/appname. I have configured my Filament provider as below:

public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('CampusRec')
            ->path('/filament')
            ->login()
            ->colors([
                'primary' => Color::Amber,
            ])
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\Filament\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\Filament\Pages')
            ->pages([
                Pages\Dashboard::class,
            ])
            ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\Filament\Widgets')
            ->widgets([
                Widgets\AccountWidget::class,
                Widgets\FilamentInfoWidget::class,
            ])
            ->middleware([
                EncryptCookies::class,
                AddQueuedCookiesToResponse::class,
                StartSession::class,
                AuthenticateSession::class,
                ShareErrorsFromSession::class,
                VerifyCsrfToken::class,
                SubstituteBindings::class,
                DisableBladeIconComponents::class,
                DispatchServingFilamentEvent::class,
            ])
            ->authMiddleware([
                Authenticate::class,
            ]);
    }

I am able to visit https://myapp.com/appname/filament and view the dashboard but nothing is working. I can't even click any buttons. I have no errors in console too. Any help is appreciated.

LaryAI

2 years ago

Level 58

It seems like you've set up your Filament admin panel to be served from a subdirectory (/app/filament). If the dashboard is visible but nothing is working (e.g., buttons are not clickable), it's possible that the assets are not being loaded correctly due to the subdirectory path.

To ensure that Filament's assets are properly loaded, you need to set the ASSET_URL environment variable to point to the correct URL where your assets are served from. This is because Filament publishes its assets to the public directory, and you need to tell Laravel where to find these assets when it generates URLs for them.

Here's what you need to do:

Open your .env file and add the ASSET_URL variable with the correct path to your assets. Since your application is in a subdirectory, you should set it like this:

ASSET_URL=https://myapp.com/app

Clear the config cache to make sure your changes take effect. You can do this by running the following command in your terminal:

php artisan config:clear

After setting the ASSET_URL, make sure to republish Filament's assets to the public directory. You can do this by running:

php artisan filament:publish

This command will republish the assets and ensure that they are accessible from the correct URL.

Finally, check your application again to see if the assets are loading correctly and if the buttons and other interactive elements are now working.

If you've followed these steps and are still experiencing issues, it might be worth checking your browser's network tab to see if there are any failed requests for assets, which could give you more insight into what might be going wrong.

heygarrison

2 years ago

Level 1

Question... How is your base url /app?

When I look at this config I would expect the route for this filament panel to be /filament.

1 like

prasadchinwal5

2 years ago

Level 35

@heygarrison My Laravel application is served under the directory /app . So my base url is /app and filament resides under /app/filament as per the config.

1 like

kokoshneta

2 years ago

Level 27

@prasadchinwal5 Not necessarily related to your issue at all, but your application being served under /app is a big, red flag. Serving from /app often means you’ve uploaded your entire Laravel project to the root folder, which makes every part of it – including .env files containing passwords – accessible to the outside world.

prasadchinwal5

2 years ago

Level 35

@kokoshneta I think there is a confusion with my original post. Serving under /app, I didn't mean the app directory of Laravel. I meant just appName. Apologies for the confusion. I am going to update my original post.

prasadchinwal5

2 years ago

Best Answer

Level 35

Thanks a lot for pointing me to right direction. The problem was with livewire trying to load its assets on the root url. But I wanted livewire to load the assets from /appname. I am using Livewire 3 which helps to solve this issue. Add the below lines in your routes/web.php file:

Livewire::setScriptRoute(function($handle) {
    return Route::get('/'. config('app.name') . '/livewire/livewire.js', $handle);
});

Livewire::setUpdateRoute(function($handle) {
    return Route::get('/' . config('app.name') . '/livewire/update', $handle);
});

5 likes

heygarrison

2 years ago

Level 1

@prasadchinwal5 curious if you tried updated your filament config with "app/filament" and if that worked at all

Glad you found a solution!

adalbertohofmanns

1 year ago

Level 1

@prasadchinwal5 This works for me!

by adding: APP_ASSETS_URL="_" at .env and on my web.php

Livewire::setScriptRoute(function($handle) {   
   return Route::get(config('app.assetsUrl') . '/livewire/livewire.js', $handle);
});

Livewire::setUpdateRoute(function($handle) {
   return Route::get(config('app.assetsUrl') . '/livewire/update', $handle);
});

this creates

GET|HEAD  _/livewire/livewire.js ............ Livewire\Mechanisms › FrontendAssets@returnJavaScriptAsFile
GET|HEAD  _/livewire/update ............ livewire.update › Livewire\Mechanisms › HandleRequests@handleUpdate

1 like

prasadchinwal5

1 year ago

Level 35

@heygarrison I think this would have been the solution if my app lived under https://myapp.com and if my published assets were inside a directory in public folder. ex. Instead of /var/www/laravel/public/app.js I had /var/www/laravel/public/custom/app.js.

I think for anyone struggling to understand, please refer the documentation here: https://livewire.laravel.com/docs/installation#customizing-the-asset-url

ysanchez

1 year ago

Level 1

This is the solution that works for me, with Laravel 12 and Filament 3, to make Filament and Livewire work properly when my Laravel app is not installed at the web root, but in a subdirectory, such as:

http://www.mydomain.com/myapp

Setup Steps

1. .env

APP_URL=http://www.mydomain.com/myapp
LIVEWIRE_BASE_PATH=/myapp/livewire

This is the only part to adapt to your personal situation.

2. routes/web.php

use Livewire\Livewire;

Livewire::setScriptRoute(function ($handle) {
    $base = env('LIVEWIRE_BASE_PATH');
    return Route::post(
        is_null($base) ? null : rtrim($base, '/') . '/livewire.js', 
        $handle
    );
});

Livewire::setUpdateRoute(function ($handle) {
    $base = env('LIVEWIRE_BASE_PATH');
    return Route::post(
        is_null($base) ? null : rtrim($base, '/') . '/update', 
        $handle
    );
});

Expected Result

Feature	Path/Behavior
Livewire JS asset	/myapp/livewire/livewire.js
AJAX update route	/myapp/livewire/update
Infinite spinners	❌ Gone
Console errors	❌ Gone (Unexpected token '<', 404, etc.)
JS hacks needed	❌ None

Please or to participate in this conversation.