CSS on production not working [solved]

What errors are you seeing (if any)? If you "view source" what do you see?

No errors. All pages work fine I just have no layout or text styles.

When I view source it brings up the html of the page. Did you want something specific?

link href="http://www.domain.ca/css/app.css" rel="stylesheet"

This is the reference to my stylesheet. My root directory is public which is where index and css are both located.

So whats in app.css and did you compile before deploying?

It has this:

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"

I did not compile before deploying. This my first laravel deploy if you haven't already guessed that. It is my first at a lot of this.

How do I compile?

you should not see public in your url?

your css is at /css/app.css and not /public/css/app.css

@drdan If you have used the css in the assets folder, then you will need to run npm run prod to compile it down and then reference the css as @Snapey mentions.

what is the URL?

Well, I had only run npm run dev so I tried npm run production but still have the same problem with no css being applied.

If I use my Web Developer to View CSS I get the following:

http://www.mydomain.ca/css/app.css

Access denied.

So it appears that the server can't gain access to read the css files. When deployed the files are owned by root:root. I have tried changing it to www-data:www-data but it has the same issue.

I am using nginx as my server.

ok,

1. NEVER EVER do a deploy using root, this will definately give you problems with file permissions / ownership. If you have to use root to do a git pull, you have not setup your server correctly, root should only be used for administrative server tasks like updates / upgrades / software installations and even then there are better alternatives.

2. I dont know how your hosting is setup, but check the nginx site configuration in the sites-enabled folder to make sure that files are allowed to be accessed.

3. Make sure that the css file is actually there and is readable (everything in /public can be set to CHMOD 0755 for world readable)

4. Am I to understand that in the app.css file is the following content?

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"

If so, this is wrong, it's HTML not CSS. Either download the file https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css and put it's contents in the app.css or replace the line in your template linking to /css/app.css

1. Quote: "This is the reference to my stylesheet. My root directory is public which is where index and css are both located."

You are saying here that the css file is actually located in /public/app.css But your HTML is referencing /css/app.css (which would be /public/css/app.css) If app.css is in the public folder (next to index.php) you should reference it as "/app.css"

Good luck.

Thanks a bunch for the help everyone. I will get to work on it.

Sorted it out. @lostdreamer_nl suggestion number 2. was the closest to the problem although it was my nginx config file in the sites-available folder.

I added the following to this file:

location ~* .(js|css|png|jpg|jpeg|gif|ico|html)$ { expires max; }

It is working now.