I'm running a serviceStack web service with an Angular front end on AppHarbor, Apparently assets are meant to be gzipped out of the box, but none are, dynamic nor static, images, css, js, html...
What am I missing? there doesn't seem to be any configuration available to turn this on or off, any suggestions?
Related
PLATFORM
* Asp.net Webforms - C#
* .Net 4.5
* Azure Web Hosting
* Chrome (43.0.2357.134 m) - Latest
PROBLEM
I am currently bundling CSS and Javascript using the ASP.NET Web Optimization Framework. When testing in my local environment, all is working great. You can clearly see that the aspx page is relatively small and the bundles are listed as separate individual files (cssAll & jsAll).
https://www.dropbox.com/s/dazt681qylk41hm/local-login-cache.PNG?dl=0
Once I deploy to Azure, the Javascript bundle does remain correctly linked and is cached, but the CSS bundle is no longer referenced. Instead, all CSS code is written directly into the head tag of the aspx file. This causes the aspx file to grow exponentially (from 5KB to 87KB) and it prevents the CSS from being cached. Interestingly, when I disable cache, the CSS file is now sent as a seperate file, and my aspx returns to its smaller size.
https://www.dropbox.com/s/eox7b0vc0mi27wo/azure-login-combined.PNG?dl=0
MY THOUGHTS & QUESTIONS
Is this normal behavior? Am I simply misunderstanding or misusing Chromes developer tools and/or the way CSS caching works?
If this is normal behavior, then why does my local environment respond differently to the Azure hosted environment?
If this is NOT normal behavior, then where could the issue be? (Please read considerations below to see what I have already tried or troubleshooted)
CONSIDERATIONS
I have confirmed that all CSS, Javascript, and relevant directory structures are identical between my local machine and Azure. (Web deploy handled this well)
I have tried the exact same tests with IE11 and Firefox, getting similar results. If caching is disabled, the CSS comes seperately as intended, but if caching is enabled, then CSS is verbosely written into head tag of aspx page.
Problem is not with Bundling because it is working. However, I have tried linking to each CSS file directly, rather than using the bundle, and the same oddity occurs.
I have completely cleared browser cache (using the clear browsing history in chrome) between tests and have used multiple computers to test this, yet the results are the same.
The page I am illustrating is very small, but other larger pages fair worse and can grow upwards of 600KB, due to this oddity.
The odd bundling behavior was finally resolved!
My local project was set to use "https" by default. However, when browsing my production site on Azure, I noticed it was using standard "http". Once I enforced all pages to be routed through "https" in Azure, my CSS was now properly bundled, linked and cached.
- As a disclaimer, I honestly have no idea why this works, but it clearly is a fix for my particular problem. If anyone can explain the "why", please feel free to do so.
I'm running a Rails 3.2 app on Heroku. For about a week we were serving assets via CloudFront by setting config.action_controller.asset_host to our CloudFront URL in our config/production.rb file. This was working successfully.
This past weekend, however, I noticed that after a deploy to production our website looked very off, and the reason was that it was serving stale CSS. I looked at the css file it was serving (using inspect element in Chrome), and the CSS was an md5-hashed application.css file coming from CloudFront. I removed the asset_host line (so that assets would be served directly from our app) and deployed again (without changing any css), and noticed that the site, which now looked fine, was serving application.css with a different md5 hash.
So it appears that for some reason, CloudFront was serving an old version of application.css, and I'm guessing this is because our application was telling users' browsers to serve an old version of application.css.
To add one more variable: we do cache the home page and part of our our layouts/application.html.erb file (which contains the stylesheet tag), but on each deploy we clear the cache via Rails.cache.clear.
So my best guess is that Rails.cache.clear might not be properly invalidating the cache. We use the dalli memcache client, if that helps.
Any insights or suggestions would be greatly appreciated!
Update:
I tried moving the CSS out of the cached block and re-enabling CloudFront, but the CSS still appears broken. So it doesn't appear to be related to caching the header.
Update 2:
It looks like this is a CloudFront issue, because when I inspect element and change the CSS URL in the to our root domain (instead of the CDN domain), the CSS renders correctly.
Since a md5-hash collision is extremely unlikely, it seems like CloudFront is serving the wrong CSS file when I'm requesting the correct md5-fingerprinted CSS file. Any ideas?
assets are not automatically synced to your CDN when you deploy an app on heroku. In the deployment script on heroku it does do the rake assets:precompile task but it does not then place them into your CDN. You'll have to create some sort of mechanism to do this on your own on deployment of your app.
Somebody else asked a similar question and you might want to have a look at what the suggestions were there: Rails 3 automatic asset deployment to Amazon CloudFront?
I'm working on a .Net/ASP project and my responsibility is to work on the design part of the application only (mostly changing css, js, images, and cshtml files)
I'm working directly on the server, so my app is not running in visual studio or locally or any environment where I can rebuild the app.
That being said, any changes I make to the website takes about 45 minutes before it shows up (I do clear browser cache every time as well).
Is there any way I can manually clear the application cache or rebuild it on the server so my changes start showing immediately?
This is something I added to the we.config but still not helping:
<caching>
<outputCacheSettings enableOutputCache="false"/>
</caching>
Well, if I'm not mistaken the cache you're targetting is not about this kind of resources as they're simply not processed by .NET. This outputcache is rather about the final HTML rendered. So I don't think that's where you should be looking. But there may be some kind of proxy somewhere caching those resources aswell.
To avoid client/server caching problems with CSS and javascript, I usually add a time ticker to every request avoiding them to be cached client-side. It should also override any "server caching" of those resources, and I would advise testing it manually before putting an automatic solution in place. so, if you're including js file that way :
<script src="/mypath/myscript.js"></script>
you could just do that :
<script src="/mypath/myscript.js?123></script>
and see if you get the changes in the file immediately now. If yes, just automate the addition of that number (ideally a timestamp so it's always different on each request) to every javascript/css inclusion you make...
In my development environment the Javascript isn't showing the changes I've made, Why is it still caching, What else can I do?
The only documentation I've seen on this is the web.config, compilation debug=true setting,
When you set debug="true", the bundler will emit script or link tags to each resource individually, rather than a one for a single (optionally) optimized resource. As such, the resource will be accessed from the static handler directly by the browser. So, if your application or IIS settings have aggressive settings for caching static content, that would be your problem.
Use Control+F5 to force a re-download of content. This should work in most browsers.
How can I make sure that static content (images, css, javascript) is cached? What is the best approach?
Will recommend you to go through this tutorial to understand how caching happens on web (HTTP) in general.
Simply speaking, the web server needs to generate appropriate HTTP headers while sending the content to the client in order to control client-side caching. In ASP.NET/IIS environment, its IIS that typically handles the static file contents and therefore, you must configure IIS appropriately to control caching static files as per you needs. See below links for more information about configuring IIS caching for static content:
http://www.iis.net/ConfigReference/system.webServer/staticContent/clientCache
How to configure static content cache per folder and extension in IIS7?
EDIT: As you have asked about the best approach, the most prevalent approach that I see now days is to version static content (say by appending some version identifier at the end of file or URL). Once version-ed, you can treat it as immutable and then emit cache headers for caching it for infinite duration. In ASP.NET application, you can probably append the assembly version (or product version) to each static content URL. So essentially, you will invalidating the cache for every build (or every product release).
You can also make use of the HTML5 Offline web applications manifest. It allows you to set up a manifest where you define which files will be cached locally.
It is a nice, clear to understand broadly implemented, way of avoiding having to learn about IIS and HTML Caching.
http://www.w3schools.com/html/html5_app_cache.asp
(you should totally read up about those things)