Ad

Error Loading CSS, JS, And Images On Every Page Except For Root Page

- 1 answer

Local dev environment loads first page of laravel site correctly, but any page after that is missing CSS, JS, and images. (non of them are loaded)

I am setting up a site on my local server that works on the live and staging sites. Their setup uses Apache, and mine uses Nginx with Homestead.

I can get the site to load the first page properly. When I navigate to other pages, the html loads, but none of the CSS, JS, or images load.

I have double checked all folders that i pulled the content correctly, and everything is present. (The first page loads properly)

When I view the console, this is the error message I recieve:

GET http://website.test/public/front/css/bootstrap.min.css net::ERR_ABORTED 500 (Internal Server Error)

I see 18 of these error messages. all related to CSS, JS, and images.

I have been stuck on this for hours, and am pretty knew to server side technologies. Any help would be appreciated.

Ad

Answer

@Caddy DZ's solution is great for Laravel as it generates a an absolute URL, but I think it's important for you to actually understand why this is happening so you don't get stuck on it again.

Imagine you are viewing your site from the URL below, and have two linked CSS resources:
https://example.com/product/101

1) <link target="_blank" rel="nofollow noreferrer" href="front/css/bootstrap.min.css">
2) <link target="_blank" rel="nofollow noreferrer" href="/front/css/bootstrap.min.css">

The two links produce different results! You must use a leading / to indicate the site root or all resources will be relative to the current directory path /product.

1) https://example.com/product/front/css/bootstrap.min.css
2) https://example.com/front/css/bootstrap.min.css

Alternatively, Laravel provides the asset() helper which will generate an absolute URL.

<link target="_blank" rel="nofollow noreferrer" href="{{ asset('front/css/bootstrap.min.css') }}">

// becomes an absolute URL
<link target="_blank" rel="nofollow noreferrer" href="https://example.com/front/css/bootstrap.min.css">
Ad
source: stackoverflow.com
Ad