CSS and JS are not loaded after pristine installation
Hey - I got some problems trying out filament.
I've created a new laravel project
composer create-project laravel/laravel filament, added livewire via composer require livewire/livewire, added filament (as stated in the docs) via composer require filament/filament:"^2.0" and ran npm install plus npm build. But when I opened http://localhost:6060 I get the famous unstyled page and my browser throws 404-errors on basically every css- and js-file. They are not even present in the public-folder. For context: I have changed the default env-Path inside the bootstrap.php (this step is needed for my deployment) and I run the whole thing inside a docker-container using the same file I use for my standard frontend (using PHP 8.1 and nginX on Alpine Linux).
Since I do not see my error, hopefully a kind person can help me on this one. 🙂13 Replies
There are no files in the public folder. They are served via php
Make sure your nginx config allows that
I think it does - but I am not famillar enough with nginX to know the specific line I have to add.
Right now it looks like this:
server {
listen [::]:8080 default_server;
listen 8080 default_server;
server_name _;
sendfile off;
tcp_nodelay on;
absolute_redirect off;
root /var/www/public;
index index.php index.html;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to index.php
#try_files $uri $uri/ /index.php?q=$uri&$args;
try_files \$uri /index.php?\$args;
}
# Redirect server error pages to the static page /50x.html
#error_page 500 502 503 504 /50x.html;
#location = /50x.html {
# root /var/lib/nginx/html;
#}
# Pass the PHP scripts to PHP-FPM listening on php-fpm.sock
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/run/php-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param SCRIPT_NAME $fastcgi_script_name;
fastcgi_index index.php;
include fastcgi_params;
}
location ~* \.(eot|jpg|jpeg|gif|png|css|map|js|ico|svg|ttf|woff|woff2|xml)$ {
expires 5d;
}
# Deny access to . files, for security
location ~ /\. {
log_not_found off;
deny all;
}
# Allow fpm ping and status from localhost
location ~ ^/(fpm-status|fpm-ping)$ {
access_log off;
allow 127.0.0.1;
deny all;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
fastcgi_pass unix:/run/php-fpm.sock;
}
} Possible relation to https://github.com/filamentphp/filament/issues/5276 - unfortunately I can't just move to another server... 🙂
GitHub
app.css/app.js Failed to load resource: the server responded with a...
Package filament/filament Package Version v2.16.57 Laravel Version v9.4.0 Livewire Version v2.10.7 PHP Version PHP 8.1 Problem description Hello everyone! I worked already with filament and never f...
It works with the default Laraveö valet setup. Maybe compare against that. Or search the discord.
@Dennis Koch - Possible: But I am on linux... 😄 Trying to figure out what is wrong here...
Nginx config should be the same for linux 😉
I'm trying to find it... 😄
Laravel - The PHP Framework For Web Artisans
Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.
tried that one - does not help... 😦
wait a second... it did help... after i replaced the whole server-entry!
so I basically just have to figure out which of the previous parameters is the problem...
so the laravel suggested nginx conf works out of the box?
yes - but interesting enough -> the configs I had posted here work aswell. There is only one problematic parameter:
location ~* \.(eot|jpg|jpeg|gif|png|css|map|js|ico|svg|ttf|woff|woff2|xml)$ {
expires 5d;
}
As soon as I add this to my server-config, the whole thing falls appart.
@Dan Harrin - sorry, forgot the ping ^^
I got that line in my setup so that the server does not have to send images and other static stuff (to which the css- and js-files in my project almost always count to) on every request...Here is some more in-depth-knowledge about that: https://www.baeldung.com/linux/nginx-cache-expiration-time
My scenario is that my project-frontend runs behind a nginX-reverse-proxy (via nginxreverseproxymanager) to add an extra layer of security. Most image, font, css and js-files can be cached, since they don't change that much in my setup.
Baeldung on Linux
Setting Expiration Time for Static Contents in Nginx | Baeldung on ...
Learn how to set an expiration time for an Nginx proxy cache.
And as soon as I remove css and js-files from the parameter, fillament works again.
That means (if I come to the right conclusions here) - running fillament behind a reverse-proxy does not let you cache css and js-files and just refresh them on the go via cache-busting...