Cloudfront serving stale CSS for Rails 3.2 app - css

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?

Related

Cloudflare Pages failing to load css / styling. Loading module was blocked because of a disallowed MIME type (“text/html”)

I am converting an Astro app to Sveltekit that's hosted on Cloudflare pages. The local dev and builds work fine however on deploy the Tailwind styling isn't applying. The classes are in the html but without any css actually applied.
Loading module from “https://bc853ba5.altov2.pages.dev/_app/immutable/start-75c8c80e.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://bc853ba5.altov2.pages.dev/_app/immutable/start-75c8c80e.js”.
The above picture is the console output on the deployment. I have my personal website hosted with Sveltekit on Cloudflare Pages and didn't have any problems. So the possible reasons I can think of is that this app is a monorepo app but the app works fine just has no css. Although I think there's some issue with reaching the app.css file.
Some other points that might matter
I have vitest and playwright set up from the initial project creation but there's no tests actually made for them.
I'm using the #sveltejs/cloudflare-adapter. I am also using +page.server.ts files to load data but I don't see why that would affect the styling
Any help would be great thanks!
I ran into the same issue today on an existing project. I bumped down the package version of the Cloudflare adapter:
"#sveltejs/adapter-cloudflare": "^1.1.0"
This solved it for me.

My Cloudflare site is taking hours to load CSS

I created a domain on CloudFlare, a website with HTML and CSS, hosted my bucket with those files on S3, and integrated terraform for deployments. When I kick off terraform apply and run the aws cli command to update the S3 bucket, formatting changes like text show immediately but my CSS changes like font sizes and colors take several hours to be visible. How can I make both types of changes visible quickly?
I tried hard reloading my browser, clearing cache, and setting auto minify on cloudflare. I haven't tried gzipping my css and min.css files, a little afraid I might break something. I'm unfamiliar with front end development. Suggestions?
For a proxied ("orange clouded") DNS record, Cloudflare applies a default caching behaviour. This includes default cached file extensions such as CSS files. The default behaviour, caching and extensions cached are documented here.
When you do a release on your origin (S3 bucket), you could purge the cache so that the old cached versions are discarded and new ones will be pulled and cached. You can also override the cache behaviour by using Page Rules. By the way, Page Rules (and other Cloudflare settings) are also manageable via Terraform.

AppHarbor not compressing assets

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?

Some users missing styles after switching to CDN on rails

I have a rails application hosted on Heroku. Recently we switched to use a CDN (cloudfront) for our assets. Although we faced problems with CORS, we were able to get it all sorted out with the font_assets gem and proper tuning of cloudfront.
We are having a few select users (two reported so far, each on latest chrome 40+) not downloading the assets and therefore having no styling of the page.
Why would this happen to select users? Some things I've noticed that might help:
There are a lot of 3xx responses recorded in cloudfront (more than
2xx)
Around the time that the user loaded an unstyled page, a 304 response was returned for the css file.

CSS : Failed to load resource in chrome

I have a django site running locally. Everything seems ok except the CSS files that can not be loaded by Chrome. I can see a Failed to load resource error in the console.
The site is ok in firefox
The site is ok if I get the css not from the local server but from the production server
The css source can be viewed correctly
I have no special blocker plugin install
The css is rather big but I still have the issue if I use a very short file
I have similar issues with some js files (ckeditor)
It works of with some other css and js (admin css for example)
The django app has been developped with 1.0 and I am in the process of moving it to 1.4. The css and js files are served as media
Any idea?
Didn't find the real cause but the problem is solved. Maybe because it was served as media and now it is served as a static.

Resources