Laravel 8 + Nginx - App.CSS and App.Js Resources from Public/ Not Loading - 404 Not Found

Laravel - GET http://127.0.0.1:8000/emer911/public/css/app.css [HTTP/1.0 404 Not Found 291ms]

use mix instead of asset:

<link href="{{ mix('css/app.css') }}" rel="stylesheet">

Laravel docker-compose 404 not found Nginx

In your nginx you set root with root /var/www/public;.

In your docker-compose.yml you mount your source to /var/www/html.

Make sure they are the same.

Nginx fails to load css files

I found an workaround on the web. I added to /etc/nginx/conf.d/default.conf the following:

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

The problem now is that a request to my css file isn't redirected well, as if root is not correctly set.
In error.log I see

2012/04/11 14:01:23 [error] 7260#0: *2 open() "/etc/nginx//html/style.css"

So as a second workaround I added the root to each defined location.
Now it works, but seems a little redundant. Isn't root inherited from / location ?

Assets not referencing to public folder (Laravel)

I was having same problem. This is due to moving of .htaccess file from public to root of the project in order to serve localhost/project rather than localhost/project/laravel. And needed to use public as well in the asset:

<link href="{{ asset('public/css/app.css') }}" rel="stylesheet">

Or, modify the asset function from /Illuminate/Foundation/helpers.php

if (! function_exists('asset')) {
    /**
     * Generate an asset path for the application.
     *
     * @param  string  $path
     * @param  bool    $secure
     * @return string
     */
    function asset($path, $secure = null)
    {
        return app('url')->asset("public/".$path, $secure);
    }
}

The preceding method is not good way. Anyway this would have been easier if there was config for setting asset path.

react.js application showing 404 not found in nginx server

When your react.js app loads, the routes are handled on the frontend by the react-router. Say for example you are at http://a.com. Then on the page you navigate to http://a.com/b. This route change is handled in the browser itself. Now when you refresh or open the url http://a.com/b in the a new tab, the request goes to your nginx where the particular route does not exist and hence you get 404.

To avoid this, you need to load the root file(usually index.html) for all non matching routes so that nginx sends the file and the route is then handled by your react app on the browser. To do this you have to make the below change in your nginx.conf or sites-enabled appropiately

location / {
 try_files $uri /index.html;
}

This tells nginx to look for the specified $uri, if it cannot find one then it send index.html back to the browser. (See https://serverfault.com/questions/329592/how-does-try-files-work for more details)

Laravel routes not found after nginx install

This is the correct basic config for Laravel and Nginx:

server {
    listen   80 default_server;

    root /var/www/laravel/public/;
    index index.php index.html index.htm;

    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }

    # pass the PHP scripts to FastCGI server listening on /var/run/php5-fpm.sock
    location ~ \.php$ {
            try_files $uri /index.php =404;
            fastcgi_pass unix:/var/run/php5-fpm.sock;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
    }
}

EDIT:
Instead of:

fastcgi_pass unix:/var/run/php5-fpm.sock;

As of November 2018, as PHP 7.2 is out, it would be:

fastcgi_pass unix:/var/run/php7.2-fpm.sock;