The issue of app.css and app.js resources not loading in Laravel 8 with nginx, resulting in a 404 not found error, needs to be

Question

The issue of app.css and app.js resources not loading in Laravel 8 with nginx, resulting in a 404 not found error, needs to be

Although this question may appear to be a duplicate, I assure you it is different. I have thoroughly searched through Stack Overflow, Laracast, Reddit, and GitHub for a solution.

My setup includes a Laravel application on an Ubuntu VM with Nginx. The problem I am facing with my Laravel 8 app is that it fails to load the app.css and app.js files from the public/ directory. Despite running
npm install & npm run dev/prod
, I continue to encounter a 404 error - 'not found' in the Chrome console. The app.css and .js files exist in the correct directories within public/css - /js. The path generated for the resources/assets is also accurate. However, everything remains unresponsive. Various attempts to configure the server block have been unsuccessful.

If you are experiencing a similar issue even after executing npm install and run dev, utilizing the asset helper function to create the path,
<script src="{{ asset('/js/app.js') }}" defer></script>
, and
<link href="{{ asset('/css/app.css') }}" rel="stylesheet">
without any success, please refer to my answer below. It may prevent you from wasting the same amount of time I did during my lengthy search.emphasized text

javascript css nginx http-status-code-404 laravel-8

Answer 1

Answer №1

The solution to the issue, if your configuration matches mine, is surprisingly simple.

When I set up my Laravel application, I placed it in

/home/myUsername/myLaravelAppName

and created a symlink for index.php in /var/www/myLaravelSiteName - where /var/www/myLaravelSiteName serves as the default nginx root for website hosting.

To resolve the problem, you also need to create symlinks for the /public/css/ and /public/js/ directories to /var/www/myLaravelSiteName, because the existing symlink for index.php does not include serving the css and js folders from /public/. This detail was not immediately clear to me.

Alternatively, you can symlink the entire /public/ directory to /var/wwwmyLaravelSiteName.

If this solution does not work, there may be other underlying issues that require further investigation for additional fixes. A quick but 'dirty' workaround would involve using external CDN links for bootstrap and integrating them into app.blade.php. While functional, it is not the recommended approach.

Additionally, any new custom css/js files added must be properly served with individual symlinks, rather than relying on serving the entire public/ directory collectively.

PS. Remember to create the symlink from sites-available to sites-enabled.

Here is an example of my working server block:

server {
    listen 80;
    listen [::]:80;

    root /var/www/laravel;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    charset utf-8;

    index index.php index.html index.htm ;

    server_name laravel www.laravel;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {

        include /etc/nginx/fastcgi_params;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        try_files $uri = 404;
    }

    location ~* \.(jpg|jpeg|png|gif|css|js|ico|html)$ {

        access_log off;
        expires max;
        log_not_found off;
    }

    location ~/\.ht {
        deny all;
    }

    sendfile off;

}

Answer 2

The solution to the issue, if your configuration matches mine, is surprisingly simple.

When I set up my Laravel application, I placed it in

/home/myUsername/myLaravelAppName

and created a symlink for index.php in /var/www/myLaravelSiteName - where /var/www/myLaravelSiteName serves as the default nginx root for website hosting.

To resolve the problem, you also need to create symlinks for the /public/css/ and /public/js/ directories to /var/www/myLaravelSiteName, because the existing symlink for index.php does not include serving the css and js folders from /public/. This detail was not immediately clear to me.

Alternatively, you can symlink the entire /public/ directory to /var/wwwmyLaravelSiteName.

If this solution does not work, there may be other underlying issues that require further investigation for additional fixes. A quick but 'dirty' workaround would involve using external CDN links for bootstrap and integrating them into app.blade.php. While functional, it is not the recommended approach.

Additionally, any new custom css/js files added must be properly served with individual symlinks, rather than relying on serving the entire public/ directory collectively.

PS. Remember to create the symlink from sites-available to sites-enabled.

Here is an example of my working server block:

server {
    listen 80;
    listen [::]:80;

    root /var/www/laravel;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    charset utf-8;

    index index.php index.html index.htm ;

    server_name laravel www.laravel;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {

        include /etc/nginx/fastcgi_params;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        try_files $uri = 404;
    }

    location ~* \.(jpg|jpeg|png|gif|css|js|ico|html)$ {

        access_log off;
        expires max;
        log_not_found off;
    }

    location ~/\.ht {
        deny all;
    }

    sendfile off;

}

The issue of app.css and app.js resources not loading in Laravel 8 with nginx, resulting in a 404 not found error, needs to be

Answer №1

Similar questions

Guide to including a promise.map (bluebird) within a nested promise chain

Unable to adjust the top padding of the navbar to 0 pixels

Angular2/TypeScript Coding Guidelines

clicking on a DIV element

Why does my React.js application still display outdated data from my Express server even after refreshing the webpage?

Occasionally, Node.js is throwing an UnhandledPromiseRejection error, and it seems like my catch block is

Minimum width of Angular Material's mat-menu

Sending data from a dynamically created PHP table to a modal

Take command of the asynchronous loop

Does a DOM API exist specifically for querying comment nodes within the document?

JQuery Mobile Listview Filter Not Working: Troubleshooting Tips

There seems to be an issue with Node.js/Express: the page at /

Failure of AJAX to transmit variable to PHP script

Is it no longer possible to create custom linked Context Menus in Tabulator 5?

The content inside a Textbox cannot be clicked on. I am seeking help with implementing JavaScript to enable it to be

Wicked PDF - Pausing to Allow AJAX Request Completion

Build.js.erb requesting a partial script task

Is there a way to programmatically update a webpage using Javascript?

Obtain the total number of result entries

Decoding a JSON object in node.js