Trouble with the Asset Pipeline on deploying (production mode)

Question

I just switched from Ruby on Rails 3.0.10 to 3.1.0 and I am using jQuery UI 1.8.14. I have a problem to load css files in production mode on the remote machine.

In my app/views/layouts/application.html.erb file I have:

<%= stylesheet_link_tag 'application', 'jquery-ui-1.8.14.custom', 'jquery-ui-1.8.14.custom_redefinition' %>
<%= javascript_include_tag 'application' %>

Note: the jquery-ui-1.8.14.custom file is the CSS file generated by using the Theme Roller and the jquery-ui-1.8.14.custom_redefinition is my "custom redefinition" file that override some CSS classes. These files (both with the extension .css) are located at vendor/assets/stylesheets.

In development mode on my local machine all seems to work, but when I deploy with Capistrano to the remote machine it doesn't work anymore. That is, the jQuery UI related files are not loaded as expected: if I try to access them, them content is blank\empty (I can see that in the source HTML code generated for my application web pages).

How can I solve that?

---

At this time in my config/environments/production.rb file I have:

# Compress JavaScripts and CSS
config.assets.compress = true

# Don't fallback to assets pipeline if a precompiled asset is missed
#
# Note: Since, at this time, the asset Pipeline doesn't work for me I am 
# following the "Live Compilation" approach (more info at
# http://guides.rubyonrails.org/asset_pipeline.html#in-production)
config.assets.compile = true

# Generate digests for assets URLs
config.assets.digest = true

In my app/assets/stylesheets/application.css.scss file I have:

/*
 *= require_self
 *= require_tree .
*/

In my app/assets/stylesheets/application.js file I have:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

Before deploy, in my local machine, I run the following command:

bundle exec rake assets:precompile

Note: if I run the above command, jquery-ui-1.8.14.custom and jquery-ui-1.8.14.custom_redefinition files are generated in the public/assets directory as expected.

---

Maybe the problem is related to the require_tree . statement in the app/assets/stylesheets/application.css.scss file that doesn't not load files present in the vendor/assets/stylesheets directory.

Answer 1

There are a few issues here, and I'll deal with each one separately.

Why this is broken

There are differences in the way assets are accessed in production and development modes with digest switched on. In development things works as normal. Sprockets serves things under app/assets with their undigested filenames. This works pretty much as though Sprockets wasn't there, but remember /assets is a mount point (Sprockets is a Rails engine), so the files under that are all being served through Sprockets.

In production filenames with digests are used, so Sprockets is expecting those names to be requested instead of the originals. They are effectively hidden behind the /assets mount point

How to fix this

The first thing is to update you application.css to this:

/*
 *= require_self
 *= require jquery-ui-1.8.14.custom'
 *= jquery-ui-1.8.14.custom_redefinition:
*/

and the stylsheet link tag to this:

<%= stylesheet_link_tag 'application' -%>

This ensures that your CSS is served (and compiled) to one file. When you run precompile the UI files end up in the /assets directory because of a bug in Rails, so don't rely on that (it will be fixed in Rails 3.1.2)

The second thing you need to do is to move your images (if you have not already done so) into assets/images.

The third thing is to add the extension .erb to the UI files in the stylesheets folder:

jquery-ui-1.8.14.custom.css.erb

The last thing is to change all reference to images in the CSS files to use the asset_path helper. From this:

url(images/ui-bg_gloss-wave_35_f6a828_500x100.png)

to this:

url(<%= asset_path('ui-bg_gloss-wave_35_f6a828_500x100.png') %>)

Run this in development mode as a test - it should work fine.

In production mode the helper replaces the normal filename with the correct fingerprinted name, so the asset can be accessed.

For production things get a bit tricky. You should be sticking with the defaults, which is to precompile all assets to the /assets directory in public.

I would check the last section of the pipeline guides and make sure that all your config files match the settings in the examples.

The very last thing is to make sure you have Capistrano setup to run the precompile job for you. Check the precompiling assets section of the guide for info on how to set that up.

That should get things working again.

You could (as an alternative to not use the pipeline for these images) move the UI files into a directory under /public and access them from the CSS. You would need to change all the image references. Since you have to change them anyway, I'd stick with the pipeline way.