Updates to CSS and .js files not being shown on nginx server

Question

I followed a tutorial and have got an nginx server running on a Vagrant VM (using Chef as a provisioner). I only have a single html page, index.html, and if I make changes to it and run vagrant provision the changes are reflected when I go to the page in my browser. However, I also have a css and js file that nginx is serving, and if I make changes to them the changes aren't reflected on the page, even after I reload the VM. This is despite the fact that I can SSH into the VM and verify that the newer versions of the files are indeed on the VM. I can't figure out how the heck the VM even has access to the older files as I overwrote them when I made the changes. Maybe there's something wrong with my nginx config file? Here is is:

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /home/vagrant/project/webroot;
    index index.html index.htm;

    # Make site accessible from http://localhost/
    server_name localhost;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
        # Uncomment to enable naxsi on this location
        # include /etc/nginx/naxsi.rules
    }

I have all 3 files (the js, css and html) file stored in webroot on the VM. Like I said, I can SSH in and verify that they're all where they're supposed to be, so I think it must be a configuration issue. Do I need to do something special for css and js files?

score 10 · Accepted Answer · answered Mar 21 '16 at 13:28

10

1) You can add cache-control headers into Nginx config.

location ~* ^.+\.(js|css)$ {
    #old style: add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
    #old style: add_header Pragma "no-cache";
    expires -1;
    sendfile off; #if you're using virtualbox (it is not about cache, but you will need it) https://www.vagrantup.com/docs/synced-folders/virtualbox.html 
}

answered Mar 21 '16 at 13:28

ashatrov

1,082
7
11

That did it! Thanks so much, was really banging my head against the wall on this one. – Adam Mar 21 '16 at 22:30
The above means static files will never be cached. Every browser call, static file will be sent. As mentioned by @Kilizo this issue should be with caching on the browser side. The above fix may have fixed your issue, but it might be making your nginx server to send the file every time browser requests.(no cache). More details here. https://css-tricks.com/strategies-for-cache-busting-css/ and http://stackoverflow.com/questions/30921598/what-does-expires-1-mean-in-nginx-location-directive – bgth Jan 10 '17 at 20:25

score 4 · Answer 2 · answered Mar 21 '16 at 05:41

4

Are you sure that your browser has not cached the old CSS and JS files?

answered Mar 21 '16 at 05:41

Kilizo

3,192
4
19
20

How can I check that? I guess just by clearing the cache? I'm using Chrome if that makes a difference. – Adam Mar 21 '16 at 05:46
3

Try loading the site in incognito or clearing your cache first. You can check when the cached CSS files expire using dev tools. This link might help http://www.devcurry.com/2012/03/how-to-determine-resources-coming-from.html – Kilizo Mar 21 '16 at 05:52

Updates to CSS and .js files not being shown on nginx server

2 Answers2