CSS file not updating on Azure Deploy/Publish - caching

RESOLVED
Unbeknownst to me, Cloudflare defaults to caching all css/js files for 4 hours.
Scenario:
I add this to our front page:
<span class="test">hullo!</span>
and this to our css file:
.test { font-size:2.0em; }
I do a web deploy, OR full publish to Azure and the span appears on the front page, but not the styling. The css file for some reason does not get updated. FF, IE, Chrome and Safari all confirm it. However, after a seemingly arbitrary time, the css file get updated.
Even when I remote into the Azure VM and restart the app, the styling is unchanged. The app is running on one instance, one role. No Azure Caching is setup. Adding a querystring param to the css file link does not help. Seems like a caching issue but no clue how to resolve.
Any ideas?

"We are using Cloudflare which has a default set up to cache all CSS and JS files. It purges the cache every 4 hours which resulted in the arbitrary updates. So, even though I was adding a new query string to the end of the css file, Cloudflare still cached the old one"
Just a quick note that you should go to CloudFlare Development Mode when making changes to the static content files on your site. You can get to Development Mode to bypass the cache by going to: settings->Development Mode. You also have the option of purging your cache as an additional option, which we would only recommend if you really want to purge everything.

Looks like it's cached by your browser. Can you please try navigate to your site and press Ctrl+F5.
Maybe you can use Fiddler to see if the CSS had been cached, or not updated, or some error when download.

This issue is resolved.
We are using Cloudflare which has a default set up to cache all CSS and JS files. It purges the cache every 4 hours which resulted in the arbitrary updates. So, even though I was adding a new query string to the end of the css file, Cloudflare still cached the old one.

I have dealt with this and I will tell you that from my experience in Chrome you can set a setting that disables the cache in the developer tools, however, I've noticed that unless you have the dev tools window open when you hit Ctrl+F5 it doesn't reload the cache. In IE there is a global setting in the dev tools that will make it redownload everything every time. In Firefox there is also a setting in the dev tools that will require it to download and not use the cache.
One way that you can test this, and how I test this, is by running Fiddler and watching if it does a full download of all your files or if it's caching.
From what I've experienced is that this is truly a browser caching issue and not anything to do with Azure.

Related

Flask cached files, no new changes applied (still loads old .css and .js files)

I have simple flask application running on flask development server on Debian9. Everything worked fine until today. Now, when I change any of the files in static directory, the browser loads the old file and no change is displayed. 2 browsers tried: Chrome and IE.
I've tried this:
Clear all browser cache, refresh page = no effect
Install 2 brand new browsers (Vivaldi and Opera) = On the first time the URL was entered, old .css files were loaded
When I rename the .css file and accordingly modify the html, the changes are applied and everything looks fine until I make another change, then I have to rename it again.
I run flask app with flask run --host='0.0.0.0' --port='80'
I found many similar posts, everytime they were solved by clearing browser cache, or adding #app.after_request decorator, but it did'nt help in this case. I don't think this is browser cache related. Thank you for any advices.
After many desperate hours of trying, I find out, that this behaviour is caused by multiple ssh sessions opened to the server. I had 2 connections via putty, one for starting and stopping server, second for files modifications. I've tested it with opening and closing the second putty connection and it's definitely the cause of the problem. I don't know if this is related only to flask (I'm no linux expert), but maybe it'll help someone.

Umbraco won't clear broken code from cache

Am creating a custom property editor for Umbraco 7. Had a a typo in the controller.js and despite what I do to clear the cache the croken code keeps showing up in the cached Dependency Handler so far I've tried:
Restarting application in IIS
Republishing Umbraco site Change
Clearing Browser cache
Change Debug="false" to Debug="true" in web.config - This worked while in debug but went
back to broken cached version when I put it back to false.
Modify ClientDependancy.config to exclude .js from fileDependencyExtensions - Again this worked while .js was excluded but went back to broken code when I added it back again.
Remove the reference to the controller from the property editors manifest. - This allowed the page to load again, but obviously the the property editor then had no controller.
Have removed datatype and and all references, restarted application and recreated it.
There has to be an easy to do this. Any suggestions?
Umbraco use the ClientDependency framework to cache the backoffice assets. CDF works by caching based on the version number in the ~/Config/ClientDependency.config file. As soon as you change the version number (just make it 1 higher or lower) the caches will be regenerated and the querystrings that automatically get added to all the backoffice assets changes.
This should bust the browser cache as well, but some browsers (Chrome especially) are very aggressive in caching assets, so on rare occasions it will also be necessary to clear your browser cache.

Firefox font issues - Bootstrap Glyphicons

Trying to use Bootstrap 3.0 (pulled via Bower) Glyphicons icon font in an app. Works perfectly in all browsers locally.
In a staging environment on heroku, icon font isn't working on Firefox. Font is hosted in an S3 bucket WITH cross-domain settings setup -- this has been verified by testing the font with a curl command as described here. I get a 200 response, no issues. So, the fonts in the right place (not a path issue) and accessible (not a cross-domain issue -- probably.)
In fact, when I look in the Network panel in firefox, I see a 200 response on the fonts... But the file size is listed as 0kb.
I have tried multiple content types (font/x-woff, application/x-woff), I have tried using font-squirrel's base 64 encoding (didn't work).
I've seen that Bootstrap's customized downloader has broken fonts but this is straight from the repo via Bower.
I have no idea what else to try. Halp?
Don't know if you ever got this solved or not, but I hit the same issue today and the cause of it is because Firefox is a bit strict about hosting your font on a separate domain. If you check out the Firefox web console, it should show an error like this:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
http:// path/to/fonts/glyphicons-halflings-regular.ttf. This
can be fixed by moving the resource to the same domain or enabling
CORS.
Apparently, there's a way to configure your S3 bucket to stop this from happening ( Boootstrap glyphicons Firefox issues ), but I haven't tried it yet.
Just looping back on this-- brushed the icon font aside in favor of an SVG solution, and in the interim we changed CDN providers, and redid all our CDN settings, while the S3 bucket settings remained the same. Checked the icon fonts in Firefox and voila, no more issues.
So I think our CDN's settings were somehow not passing through the needed permissive S3 settings, or so my coworker suggested.

CS-Cart editing .tpl files and cache refresh

I am doing some simple hooks and some more advanced ones for a customer. (CS-Cart 2.1.4)
I have 2 websistes (production site and test site)...the two environment are not exactly the same, sadly
If I edit anything in a TPL file in the test environment, I simply save+upload on FTP and the edits are immediately visible on test website...
If I do the same edits on production environment, then save+upload on FTP, nothing changes on the storefront...
I understand it has probably something to do with template caching, and i should run mysite.com/admin.php?cc
The problem is I am the new webmaster, the old one left arguing with customer, I don't know what he has left exactly and I am afraid of refreshing production cache and "destroying" everything...(the website makes about 1M Euros/year...just to tell you what...). what if he has made some changes on the template and never refreshed cache???
Any suggestion on how to see my edits to those damned .tpl files???
To avoid clearing cache manually (by &cc) you should to change the Store mode.
Open the Admin area (any page) and look at the page bottom: http://screencast.com/t/aS2aG7oYTg
Your Store is working in Live mode and the Smart Template Engine does not check the changes in file. Click once this link and the Store mode will be changed to the "Development". Cache will be updated automatically.
P.S. You can delete var/cache and var/compiled. Store will not be destroyed :)
I solved it, by creating a clone of the Virtual Machine , editing there, and then replicated edits on main production site after being 100% sure there were no issues when clearing the cache ;-)

CSS reload on IE7

It looks like IE7 doesn't reload the latest version of my stylesheet each time I upload a new version on the server.
This is annoying as I am debugging my .css file to make it work on IE...
Tried to empty the browser cache but still not working.
Thanks for your help.
Ctrl-F5 - forcible way to reload in IE
Include your version number in the file name. myfile_v1234.css
When testing, every time you do an update you can just wite "stylesheet.css?r=98123"
As long as the query string is different, it'll be downloaded again.
If you need, you can use javascript to append Math.random(), to get the random number. Not required on production though, when updates would be stable.
2 Questions:
Does IE eventually load with the newer stylesheet?
How are you saving the changes to the server (SSH, Web Interface, etc.)?
I ask because I ran into an issue with a web-based file management system a while back where one browser would show the CSS just fine, the other wouldn't, and we noticed the issue of which browser played nicely depended on which browser we used to upload the CSS.
The reason turned out to be that IE gave the CSS file a different MIME type than Firefox. If you continue to notice the issue even when you've cleared the cache, check the MIME type of the file using Firefox by going to Tools > Page Info.
Also, if it is simply a caching issue, consider turning caching off in IE. I believe this should be an Advanced Option under Internet Options.
Also, you may want to try creating a special developer environment for IE (if it comes down to it.) Perhaps have another machine with IE7 and no caching and any other features turned off (A kiosk mode, perhaps), and then previewing the page on that machine.
Thanks to you all!
I did manage to solve my problem with the "stupid" Ctrl+F5, and by changing the Internet Parameters of Windows to reload content every new visit.

Resources