Troubleshoot Rails 4 asset pipeline

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

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:

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

Rails configuration

./app/config/environments/production.rb

rake commands

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

Onwership

Replace www-data by the application user

Check folders

nginx configuration

Reload the application stack

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:
 

Leave a Reply