Rails Assets and CDN Issues (CSS, JS references) - ruby-on-rails

Question

I am dealing with Rails 3.1.2, asset_sync and cludfront. I have installed asset_sync and precompiled all the assets. The problem I am facing is the following:
rake compiles combine javascript and css files into a application.[js|css].
In production mode the application is still referencing the original name but with the new cdn path and I get a 404 error.
this is production env file:
Griov4::Application.configure do
# Settings specified here will take precedence over those in config/application.rb
# Code is not reloaded between requests
config.cache_classes = true
# Full error reports are disabled and caching is turned on
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = false
# Compress JavaScripts and CSS
config.assets.compress = true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true
# Generate digests for assets URLs
config.assets.digest = true
# Defaults to Rails.root.join("public/assets")
# config.assets.manifest = YOUR_PATH
# Specifies the header that your server uses for sending files
# config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
# See everything in the log (default is :info)
# config.log_level = :debug
# Use a different logger for distributed setups
# config.logger = SyslogLogger.new
# Use a different cache store in production
# config.cache_store = :mem_cache_store
# Enable serving of images, stylesheets, and JavaScripts from an asset server
# config.action_controller.asset_host = "http://assets.example.com"
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
# Disable delivery errors, bad email addresses will be ignored
# config.action_mailer.raise_delivery_errors = false
# Enable threaded mode
# config.threadsafe!
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation can not be found)
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners
config.active_support.deprecation = :notify
config.action_controller.asset_host = "#{ENV['CDN']}"
end
This is my .env file
FOG_PROVIDER=AWS
FOG_DIRECTORY=
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
CDN=http://d3tf1w68p27174.cloudfront.net
RACK_ENV=production
my manifest file within js folder:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require_tree .
my manifest file within css folder:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require bootstrap.min
*/
Then I type: $bundle exec rake assets:clean assets:precompile
application.ss and application.js gets created but unfortunately the production application still refers to the original css/js files with the following path:
http://d3tf1w68p27174.cloudfront.net/assets/home-24d72d1643e0016381b14c19d90d9e74.css
http://d3tf1w68p27174.cloudfront.net/assets/home-74ac0007a6e42997f8210f80b99a203b.js
I checked both my local folder and the cdn folder and none of them contains those files.
asset_sync is working correctly because I can see the rest of the assets on my cdn folder.
I know it could be something related to the asset pipeline, but I can't figure out what it is.
Thanks for your help.

Answer 1

To ensure all of your assets reference the new asset host, make sure you’re using the Rails AssetTagHelper methods (like image_tag, stylesheet_link_tag, favicon_link_tag, etc).
If you are using background image references in your CSS, you can leverage the multiple asset-preprocessor support to ensure they also reference the new asset host.
For example, to enable multiple asset-preprocessing on "home.css", you can add the .erb extension to it changing it to "home.css.erb". This file will first be processed by ERB, then CSS, which means you can reference your assets as shown in the example below:
body {
background: url(<%= asset_path 'bg.png' %>);
}
You can take this further by doing something like "home.css.scss.erb".
See this and this for more info.