Expires header "max" on JS and CSS files in Nginx configuration; resulting in unhappy front-end developers

[martijnv]

We recently converted all our projects from our old VM-based development solution to ddev and we are very happy with the improved developer experience. However, our front-end developers do have an issue with the JS and CSS files getting an expires header that results in the browsers caching JS and CSS files and not seeing changes when JS or CSS is changed.

The expires header is set in the Nginx configuration:

# Media: images, icons, video, audio, HTC
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    try_files $uri @rewrite;
    expires max;
    log_not_found off;
}

Is there a reason to set this header to max for JS and CSS files? I cannot believe other developers don't have this issue so maybe we are overlooking something obvious...

Describe the solution you'd like
I would like to have a separate location directive for just JS and CSS files that sets expires -1;

# JS and CSS
location ~* \.(js|css)$ {
    try_files $uri @rewrite;
    expires -1;
    log_not_found off;
}

[martijnv]

PS: I know you can change the genereated nginx-site.conf, but I do not want to loose the ability to easily update ddev and get updates on that configuration later down the line.

[rfay]

We sure want your front-end developers to be happy!

I assume you're already working with a project-level nginx-site.conf - could you please share it? A PR would be great.

Also, could you review the other CMS project-type settings in https://github.com/drud/ddev/tree/master/pkg/ddevapp/webserver_config_packr_assets and recommend changes to those (or include that in a PR)?

Thanks!

[rfay]

Asked for feedback about this in https://twitter.com/randyfay/status/1285572996459986944

[martijnv]

Thanks for the reply and asking for feedback from more people. We do have a project-level nginx-site.conf, but the changes are limited to the separate location directive for JS and CSS files (for most projects). I will see if I can create a PR soon.

[rfay]

Would appreciate your review of #2413

[rfay]

@martijnv just one question as I get ready to test and pull #2413: Why don't your devs have cache turned off in their browser? Isn't that the easiest way to solve this?

[martijnv]

@rfay that is a very good question and I feel a bit silly not thinking about that.

It does the trick, but in Chrome the "disable cache" option in Devtools only works while the Devtools are open. There does not seem to be an easy way to permanently disable the browser cache in Chrome other than setting the disk cache size to 1 byte with some command line options or a registry hack. This would disable caches globally off course, which you might not want.

There might be Chrome plugins to disable the cache to work around this issue. There are also a lot of OS and browser (and maybe even device) combinations where you would need to disable the caches which feels like a lot of effort while changing the expires header is a small change in one place?

[rfay]

The only thing that worries me a little is that lots of people use ddev for other things, back-end development, reviewing websites, etc. And if we change this as in #2413 it may affect them, perhaps slightly. But it does seem worth taking a step back before changing the default configuration to suit front-end devs only.

I never met a front-end developer that didn't have the developer tools pane open though.

[jmsimons]

Chrome Incognito windows/tabs do not cache files or use cached files but you still have bookmarks and other features.