Troubleshoot Rails 4 asset pipeline

posted on January 7, 2014 by | Leave your thoughts
All your tubes need to be aligned for your assets to be delivered.

All the pipes need to be aligned for your assets to be delivered.

Here is a summary of all the elements to check to insure a working asset delivery using Rails 4 asset pipeline. As you will see bellow, quite a lot of elements can make the asset delivery fail. Hopefully this guide should covert all the problems you could get with your asset pipeline!

Use the asset pipeline in all the code

./app/views/layouts/application.html.erb

<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>

Without using the Rails helpers, you cannot guaranty the URL of the assets will be correct.

The img tag should not be used, it needs to be replaced by the image_tag helper function such as:

<%= image_tag "icons/rails.png" %>

The CSS needs to be adapted for SASS. See the dedicated page on the official website:  http://guides.rubyonrails.org/asset_pipeline.html

Rails will make transformations as follow:

  • image-url(“wip/logo.png”) becomes url(/assets/wip/logo.png)
  • image-path(“wip/logo.png”) becomes “/assets/wip/logo.png”

./app/assets/stylesheets/application.css.scss

#header .logo {
height: 80px;
width: 160px;
margin-top: 10px;
float: left;
background-image: image-url('wip/logo.png');
background-repeat: no-repeat;
}

Rails configuration

./app/config/environments/production.rb

# Disable Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = false

# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass

# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true

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

# 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

rake commands

bundle exec rake assets:clobber RAILS_ENV=production
bundle exec rake assets:precompile RAILS_ENV=production
The assets are not generated with the same name according to the environment! You need to run the command for the proper environment.

Make sure the asset folder exists

mkdir  public/assets/

Onwership

chown -R www-data:www-data ./public/assets
Replace www-data by the application user

Check folders

ll -R public/assets/
public/assets/wip:

total 1

drwxr-xr-x 2 www-data www-data 4096 Jan 3 12:51 ./
drwxr-xr-x 5 www-data www-data 4096 Jan 3 12:51 ../
-rw-r--r-- 1 www-data www-data 3391 Dec 23 14:27 logo-f7e8d1e4b5ee1809db2d8e9223ab2330.png

nginx configuration

location ~* ^/assets/ {
root /home/wip/apps/wip/current/public;
gzip_static on;
expires max;
add_header Cache-Control public;
add_header Last-Modified "";
add_header ETag "";
break;
}

Reload the application stack

service unicorn_init.sh restart
service nginx restart
You need to reload all the elements of your stack, the process will be different if you are using Passenger, PUMA or Unicorn.

Now we should be able to test our application.

Test the HTTP delivery

Open your browser and try to load the asset using the compiled assets name retreived at the previous step: http://localhost/asset/wip/logo-f7e8d1e4b5ee1809db2d8e9223ab2330.png

You may also look at the source code of your application to verify that:

  • The CSS/JS files are loaded correctly
  • The URL are correctly replaced with the correct value, in our example:
#header .logo {
height: 80px;
width: 160px;
margin-top: 10px;
float: left;
background-image: url(assets/wip/logo-f7e8d1e4b5ee1809db2d8e9223ab2330.png);
background-repeat: no-repeat;
}

 

Posted in

Leave a Reply