37

I've been following along Michael Hartl's excellent RoR Tutorial, but I'm using RoR 3.1. I am a newbie to RoR 3.1 and need help related to assets pipeline. Here is my problem:

Before continuing to section 5.3, I thought I'd like to push to Heroku and see how things develop. To my surprise "GET /" results in error 500. Everything went OK in my local-development-environment. I then tried running my local sample_app under production-environment (rails s -e production). Same result, error 500:

Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError in Pages#home

Showing /Users/john/Projects/sample_app/app/views/layouts/_stylesheets.html.erb where line #4 raised:

blueprint/screen.css isn't precompiled

Supporting info:

  1. I put blueprint CSS directory under vendor/assets/stylesheets.

  2. I followed Michael's section 13.1.4 advice and have the following as my app/views/layouts/application.html.erb:

    <!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <%= render 'layouts/stylesheets' %>
    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <div class="container">
      <%= render 'layouts/header' %>
      <section class="round">
        <%= yield %>
      </section>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

  3. Content of app/views/layouts/_stylesheets.html.erb:

    <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print',  :media => 'print' %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->

  4. I have run bundle exec rake assets:precompile.

  5. Content of public/assets/manifest.yml:

    ---
logo.png: logo-8e0a5ad292fbb13a2b07e68fa3995406.png
rails.png: rails-bd9ad5a560b5a3a7be0808c5cd76a798.png
blueprint/plugins/buttons/icons/cross.png: blueprint/plugins/buttons/icons/cross-2ebcd25368006d1b7b0c5b7d6b523ab3.png
blueprint/plugins/buttons/icons/key.png: blueprint/plugins/buttons/icons/key-55237526967cbcab3e8cfb12f0029d88.png
blueprint/plugins/buttons/icons/tick.png: blueprint/plugins/buttons/icons/tick-3f5fc1f52b505b93f88263e0432d25ce.png
blueprint/plugins/buttons/readme.txt: blueprint/plugins/buttons/readme-3ff7f5dbb0288d71f70682fdbe9d86ec.txt
blueprint/plugins/fancy-type/readme.txt: blueprint/plugins/fancy-type/readme-e7ed185d1a9f23256d418ab929b464d9.txt
blueprint/plugins/link-icons/icons/doc.png: blueprint/plugins/link-icons/icons/doc-b071fd74b88ff38cda8360a53f493013.png
blueprint/plugins/link-icons/icons/email.png: blueprint/plugins/link-icons/icons/email-28104e72b3418737d4b9b329c12ec358.png
blueprint/plugins/link-icons/icons/external.png: blueprint/plugins/link-icons/icons/external-ee6d976ddb80125fafe1a33c6f8aed10.png
blueprint/plugins/link-icons/icons/feed.png: blueprint/plugins/link-icons/icons/feed-59bc8604661681639d25cb7015a32c38.png
blueprint/plugins/link-icons/icons/im.png: blueprint/plugins/link-icons/icons/im-afeeb6e0b652c1edb1441bf0fb428596.png
blueprint/plugins/link-icons/icons/lock.png: blueprint/plugins/link-icons/icons/lock-d73c4b3b57ce72cb6dbd8b265507ff75.png
blueprint/plugins/link-icons/icons/pdf.png: blueprint/plugins/link-icons/icons/pdf-c4c543e5103a8516839a7846b91e1ac4.png
blueprint/plugins/link-icons/icons/visited.png: blueprint/plugins/link-icons/icons/visited-fb2370448bc4ea5d079e963a8c0d900b.png
blueprint/plugins/link-icons/icons/xls.png: blueprint/plugins/link-icons/icons/xls-5399729cd31dffc492a04b3805cd0be1.png
blueprint/plugins/link-icons/readme.txt: blueprint/plugins/link-icons/readme-42c02030199cd36a671d4b623cb4dc36.txt
blueprint/plugins/rtl/readme.txt: blueprint/plugins/rtl/readme-8d11bf76e19fb3fc7dbc6c2ddb54b92d.txt
blueprint/src/grid.png: blueprint/src/grid-973add038ed86febca85f03e8b35b94a.png
jquery-ui.min.js: jquery-ui-7e33882a28fc84ad0e0e47e46cbf901c.min.js
jquery.min.js: jquery-8a50feed8d29566738ad005e19fe1c2d.min.js
application.js: application-a552e1db33b8be6a42eedf1261916f3c.js
application.css: application-214e0c0742f20b334e8a7776e0a4c71d.css

  6. I don't see blueprint/screen.css in manifest.yml.

What am I missing?

John Indra
  • 473
  • 1
  • 5
  • 6

4 Answers4

75

From http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array

This means that in your config/environments/production.rb, you set

config.assets.precompile += %w( blueprint/screen.css blueprint/print.css )

or a catchall:

config.assets.precompile += %w( *.css *.js )
Jeppe Liisberg
  • 3,734
  • 3
  • 25
  • 24
  • 5
    I'm not the architect of the assets pipeline, but my guess is that you by default only want to precompile the manifest files, since the whole point is to have one single js file and one single css file for the entire app. That's the whole beauty of the concept. So if you have this very special need to request assets seperate from the main manifest, you should be very specific about this. Does that make sense? – Jeppe Liisberg Sep 25 '11 at 12:40
  • you don't want 'config.assets.compile = true' because you want the asset system to be fast in production, so you want it to be precompiled by all means. – Jeppe Liisberg Sep 25 '11 at 12:42
  • 4
    and you don't want to "config.assets.precompile += %w( *.css *.js )" because that will clutter your public/assets dir with a lot of unused files (files that are already included by the manifest eg application.js) – Jeppe Liisberg Sep 25 '11 at 12:46
  • Since the guideline is to put assets like Blueprint CSS in `vendor/assets` (CMIIW), isn't it natural to think that by putting things in `vendor/assets`, the whole thing would just work without any additional config? – John Indra Oct 01 '11 at 01:59
  • 1
    You will also have to run bundle exec rake assets:precompile before deploying. – mhartl Nov 25 '11 at 19:11
  • It's great for when you conditionally include files like `` that are not included it in the manifest or by using `require_tree .` (which would render the ie7 for all browsers. – manafire Mar 06 '12 at 15:29
  • 1
    Has someone noticed that @mhartl himself has given a comment here ? – Jashwant Oct 10 '12 at 18:40
  • 2
    You should be carefull with the *.css and *.js. If you have gems that have stylesheets in them, all of the stylesheets will be loaded. For instance. I use bootswatch for one of my projects. This has several different scss files for styles. When using *.css I get conflicts in the style and stuff does not get loaded correctly => precompile does not work. – Automatico Oct 24 '12 at 18:12
3

I added a reference to the blueprint stylesheets in my application.css file. This way, I do not have to change the layout to modify the stylesheets, I simply need to modify the application.css file, run rake assets:precompile, and restart the webserver (if webrick or similar).

My application.css currently looks like this:

/*
 * 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_tree ./blueprint
 *= require_tree . 
 */
T0xicCode
  • 4,583
  • 2
  • 37
  • 50
  • Ok, but somtimes it's needed to have css and js stored in separated files. For example, for performance purpose. – odiszapc Dec 10 '12 at 11:32
2

You may want to precompile your assets on production as described above. And if you use capistrano you may do it after code update:

require 'bundler/capistrano'

after 'deploy:update_code' do  
  run "cd #{release_path}; RAILS_ENV=#{rails_env} bundle exec rake assets:precompile"
end
Sirex
  • 195
  • 2
  • 13
2

From my own experience with this problem, where I was also going through the excellent RoR tutorial by Michael Hartl, there was one step that I think might be left out at this point...

bundle exec rake assets:precompile    
git add public/assets
git commit -m "vendor compiled assets"
git push heroku

I found this here.

Dave Haynes
  • 3,633
  • 6
  • 27
  • 23