May
23

Link to static assets on Rails 3.1

Posted in : rails, sass, assets, and sprockets

Having just migrated an application to Rails 3.1, we discovered that the following line is not valid anymore:

= javascript_include_tag "rightjs", "application", :cache => "all"

The easiest solution is moving all your javascripts in app/assets/javascripts/ then create a file all.js

// require "rightjs"
// require "application"

Or we can also just add the require in application.js itself. Soon we had to do the same for our stylesheets: move them to app/assets/stylesheets.

Also, the default path where image_tag will look for our images is now app/assets/images and no more public/images. The public folder does now shrink to only a handful of files.

The only remaining issue should now be with images (and fonts) referenced in the stylesheets as ../images doesn’t work anymore. The first thing we tried was changing:

url(../images/myimage.png)

To:

url(/assets/myimage.png)

Ok now it works, but is only suitable for dev because it does hit our application to serve the static files. Hopefully, Rails has a new rake task to precompile all assets to the public/assets folder:

bundle exec rake assets:precompile RAILS_ENV=production

Don’t forget to specify the environment otherwise the css won’t be minified properly. Also our files will be renamed from:

application.css

to:

application-ab5f...(more letters and digits).css

It combines the original filename with a hash, a MD5 digest of the file content after evalutation. This is to ensure proper cache reloading - the old way with query string didn’t work with some proxies. In order to avoid serving static assets in production, we have to reference these images directly, with the hash in filename. So intead of:

url(/assets/myimage.png)

What we want is:

url(/assets/myimage-df02(more letters and digits).png)

Of course, doing it manually like suggested here would be tedious. The solution is to rename our stylesheet to application.css.erb (or application.css.scss.erb) and type:

url(<%= asset_path "myimage.png" %>)

Don’t bother trying to write:

url(<%= asset_path "images/myimage.png" %>)

Even if the image is actually in app/assets/images because it won’t generate the right link. We did also moved our fonts to app/assets/fonts, it works no differently that for images. Reminder: if you forgot to specify the environment (RAILS_ENV=production) when running the assets:precompile tasks the links won’t include the necessary hash in filename.

We're available to help your business.
If you're interested, please fill the contact form on our website.
You can also ping us via twitter @OpenhoodTeam.

blog comments powered by Disqus