Using Compass on Heroku: /tmp for stylesheets remotely and locally

Question

I'm currently using Compass with Heroku using this configuration recommended on the Heroku knowledge base. Heroku has a read-only file system, and so the compiled stylesheets need to be stored in /tmp. This works fine remotely on Heroku; locally, however, Rails expects to find stylesheets in /public/stylesheets (when called through = stylesheet_link_tag 'screen.css', :media => 'screen, projection').

In order to solve the problem, I have created symbolic links in /public/stylesheets using ln -s tmp/stylesheets/screen.css public/stylesheets/screen.css and that seems to work.

Is there a way to solve this problem without using symbolic links, perhaps by changing some configuration in Rails? I've poked around without much success.

Here is my config/initializers/compass.rb:

require 'compass'
require 'compass/app_integration/rails'
Compass::AppIntegration::Rails.initialize!

# Required for Heroku:
require 'fileutils'
FileUtils.mkdir_p(Rails.root.join("tmp", "stylesheets"))

Compass::AppIntegration::Rails.initialize!

Rails.configuration.middleware.delete('Sass::Plugin::Rack')
Rails.configuration.middleware.insert_before('Rack::Sendfile', 'Sass::Plugin::Rack')

Rails.configuration.middleware.insert_before('Rack::Sendfile', 'Rack::Static',
    :urls => ['/stylesheets'],
    :root => "#{Rails.root}/tmp")

And here is my config/compass.rb:

project_type = :rails
project_path = Compass::AppIntegration::Rails.root

# Set this to the root of your project when deployed:
http_path = "/"

# Necessary for Heroku (original commented out:
css_dir   = 'tmp/stylesheets'
#css_dir = "public/stylesheets/compiled"

sass_dir  = 'app/views/stylesheets'

environment = Compass::AppIntegration::Rails.env

Any help would be greatly appreciated.

Answer 1

I was actually just about to set up Compass with our Rails application, which is hosted on Heroku, so cheers for giving me an excuse to work through this. :)

The answer is simple:

Modify 'config/compass.rb':

project_type = :rails
project_path = Compass::AppIntegration::Rails.root

http_path = "/"

environment = Compass::AppIntegration::Rails.env
if environment == 'production'
  css_dir = "tmp/stylesheets"
  sass_dir = "app/views/stylesheets"
else
  css_dir = "public/stylesheets"
  sass_dir = "app/stylesheets"
end

Then modify 'config/initializers/compass.rb':

require 'compass'
require 'compass/app_integration/rails'
Compass::AppIntegration::Rails.initialize!

require 'fileutils'
FileUtils.mkdir_p(Rails.root.join("tmp", "stylesheets"))

environment = Compass::AppIntegration::Rails.env
if environment == 'production'
  Compass::AppIntegration::Rails.initialize!

  Rails.configuration.middleware.delete('Sass::Plugin::Rack')
  Rails.configuration.middleware.insert_before('Rack::Sendfile', 'Sass::Plugin::Rack')

  Rails.configuration.middleware.insert_before('Rack::Sendfile', 'Rack::Static',
      :urls => ['/stylesheets'],
      :root => "#{Rails.root}/tmp")
end

... and voila, you're good.

Answer 2

ok, I'm a big heroku and compass fan myself so i've been through this many times

Heroku's docs, whilst giving correct information, provide poor advice in this instance.

When using compass, the best thing to do, 99.999% of the time is turn it off in production mode.

This means that you compile your stylesheets on your development machine and then add them to your git repo before pushing to heroku.

You will suffer a reasonably sizeable performance hit if you allow compass to compile on the server.

So here's what I do:

You should have a config.ru file at the base of your app. Open it and add the following:

require 'sass/plugin/rack'
use Sass::Plugin::Rack
Sass::Plugin.options[:never_update] = true

You can then remove quite a lot of the code from your initializer (especially the part where you unload Sass::Plugin::Rack). Additionally you will want to remove the if statement from compass.rb in config folder

Think about it, why would you want Sass to compile a stylesheet on the server? It just eats up processing power. Hope this helps,

EDIT:: PS - I should add that you will need to run compass watch from the command line now in order to get your stylesheets to compile in your dev environment

Answer 3

The recommended Heroku configuration will also work locally.

1. Removed the second 'Compass::AppIntegration::Rails.initialize!' from config/initializers/compass.rb, you only need it once.
2. Ensure your scss files are in 'app/views/stylesheets'

On both local and production servers the stylesheets will be compiled to tmp/stylesheets, and a request to /stylesheets will resolve to tmp/stylesheest. No need for two separate configurations.