Filament•2mo ago

Custom page messing up sidebar

I made a custom page where I built a custom Livewire component. I also added the app.css file as I needed the tailwind-classes.

@vite(['resources/css/app.css'])

<x-filament-panels::page>
    <livewire:subject-tree />
</x-filament-panels::page>

@vite(['resources/css/app.css'])

<x-filament-panels::page>
    <livewire:subject-tree />
</x-filament-panels::page>

It all works fine locally but when I deployed, it messed up the layout. The navigation overlaps my component. First screenshot is how it should be, second is the one on the server. Am I missing something? Publishing assets, config, ... ? The weird part is that all the functionality works as it should, it's just the css that doesnt work as expected.

12 Replies

toeknee•2mo ago

npm run build on prod

Christophe•2mo ago

Fair enough, that works but it's in my deploy script as well (the deploy:build task):

task('deploy', [
    'deploy:info',
    'deploy:setup',
    'deploy:lock',
    'deploy:release',
    'deploy:update_code',
    'deploy:shared',
    'deploy:vendors',
    'deploy:modules',
    'deploy:build',
    'deploy:writable',
    'artisan:storage:link',
    'artisan:migrate',
    'artisan:cache:clear',
    'artisan:config:cache',
    'artisan:queue:restart',
    'artisan:view:cache',
    'artisan:update-schedule-monitor',
    'deploy:symlink',
    'deploy:reload',
    'deploy:unlock',
    'deploy:cleanup',
]);

task('deploy', [
    'deploy:info',
    'deploy:setup',
    'deploy:lock',
    'deploy:release',
    'deploy:update_code',
    'deploy:shared',
    'deploy:vendors',
    'deploy:modules',
    'deploy:build',
    'deploy:writable',
    'artisan:storage:link',
    'artisan:migrate',
    'artisan:cache:clear',
    'artisan:config:cache',
    'artisan:queue:restart',
    'artisan:view:cache',
    'artisan:update-schedule-monitor',
    'deploy:symlink',
    'deploy:reload',
    'deploy:unlock',
    'deploy:cleanup',
]);

toeknee•2mo ago

Did it resolve it? I am not familiar with your tasker Might need to restart FPM depending on your setup too.

Christophe•2mo ago

Yes it worked but I'm not sure why I should build it afterwards on the server if I'm building it first with my deploy script. I will look into it. Thanks though!

toeknee•2mo ago

No problem

Christophe•2mo ago

FYI: this is the deploy package I'm using: https://deployer.org/

Deployer - The deployment tool for PHP | Deployer

Deployer is a tool for deploying PHP applications to a remote server.

toeknee•2mo ago

Interesting, I just use Ploi

Dennis Koch•2mo ago

Not sure why you are injecting @vite() above the page instead of using a theme? How is your deploy:build defined?

Christophe•2mo ago

It was the easiest fix I could find. Would this be better? https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Christophe•2mo ago

task('deploy:build', function () {
    run('cd {{release_path}} && npm run build');
});

task('deploy:build', function () {
    run('cd {{release_path}} && npm run build');
});

Dennis Koch•2mo ago

It sounds a bit hacky to me 😅 Hm. Weird.

Christophe•2mo ago

It is though but it was not quite clear to me how I could solve it otherwise

Gaming

Programming

Custom page messing up sidebar