css/js is not working in production laravel filament

I deployed laravel filament on production server for testing but css / js file are not including or not working

The laravel welcome as proper css / jss applied but when i try to access filament using /admin in url then there is no css / js

https://snipboard.io/FfC4Ja.jpg

https://snipboard.io/7Fh4Rz.jpg

Here is Dockerfile that install all dependencies composer and npm and working fine

FROM php:8.2-apache

Install dependencies RUN apt-get update && apt-get install -y libzip-dev zip libicu-dev nodejs npm

Install PHP extensions RUN docker-php-ext-install pdo_mysql zip intl

Install Composer RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

WORKDIR /app COPY . /app

Update and install PHP dependencies before running composer install RUN composer update

Print more information during composer install for debugging RUN composer install --verbose

Install and build npm dependencies RUN npm install

Run npm production build RUN npm run production

EXPOSE 8000 CMD php artisan serve --host=0.0.0.0 --port=8000

NEED HELP IN THIS MATTER

LaryAI

2 years ago

Best Answer

Level 58

It seems like the issue you're facing is related to the assets not being properly loaded in the production environment for your Laravel Filament admin panel. Here are a few steps you can take to troubleshoot and resolve this issue:

Ensure Filament Assets Are Published: Make sure that you have published the Filament assets by running the following command:
```
php artisan filament:publish
```
Check File Permissions: Verify that the permissions on the public directory and its contents are correct. The web server should have read access to these files.
Clear Caches: Clear all caches to ensure that there are no cached configurations or routes that might be causing the issue. Run the following commands:
```
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear
```
Regenerate Assets: Sometimes, the assets may not be properly compiled. You can try regenerating them with:
```
npm run dev
```
Or, for production:
```
npm run production
```
Check .htaccess and Server Configuration: If you are using Apache, ensure that the .htaccess file is present in the public directory and is configured correctly. For Nginx, make sure your server block is set up to handle asset requests properly.
Verify Asset URLs: Check the HTML source of your admin page to see if the asset URLs are correct. They should be pointing to the correct location of your CSS and JS files.
Use Artisan Serve in Production: It's not recommended to use php artisan serve for production environments. Instead, configure a proper web server like Apache or Nginx to serve your application. The php artisan serve command is meant for development purposes and may not handle static assets correctly in production.
Docker Specific Configuration: Since you are using Docker, make sure that your Dockerfile and any associated configuration files (like docker-compose.yml) are set up to correctly expose the necessary ports and volumes for your application.
Check Network Issues: If you're behind a load balancer or using Docker, ensure that there are no network issues preventing the loading of assets.

If after trying these steps you're still facing issues, please provide more specific error messages or logs that could help in diagnosing the problem further.

1 like

fedoruk

1 year ago

Level 1

I faced a similar problem. However, the solutions given above did not help me. I'm here to share my solution to the problem.

This behavior can be caused by an incorrect nginx configuration (in my case), which did not include the default /etc/nginx/mime.types file, which included settings for processing various MIME-types.

Check that in your configuration file (usually located at) /etc/nginx/nginx.conf, there is a connection line for the file /etc/nginx/mime.types:

include /etc/nginx/mime.types;
default_type application/octet-stream;

I hope I saved you a lot of time, because I did not immediately discover this due to incorrect replacement of the configuration file when building the image.

2 likes

wolfcoder

1 year ago

Level 6

@fedoruk In my case it already contains the following:

include /etc/nginx/mime.types;
default_type application/octet-stream;

I have not resolved the same issue.

Please or to participate in this conversation.