As a developer, I have realized the need to pay attention in keeping my codes clean as it has a lot of advantages. To ensure this, I believe some of the best choices would be HAML, SASS and COMPASS especially for front-end.
UPDATE: Please note that this post was written for Rails 3.0 way back in 2011. As you can guess, this method has been deprecated. Please follow the official Heroku documentation for the up to date information.
Nowadays, I tend to use SASS full time (with my tiny modular framework) for almost every Rails and Non-Rails project I undertake.
Rails is awesome! When it comes to Rails hosting, I would go for Heroku, as I’m not very keen on debugging ambiguous errors. 🙂
I find it a lot more effective in keeping my SASS source files in the app/ directory rather than in a public folder. Basically when the app is up and running, COMPASS dynamically compiles the source file to a .css file and saves it to the stylesheets folder.
So, at first, when I pushed the app to Heroku and tried to access the site, I came across an error page, with the message “We’re sorry, but something went wrong”. When I hit the refresh button again, the site worked fine. I analyzed the log file and I was able to spot the following error log:
1 | Errno::EACCES (Permission denied - /app/f284ffb5-1ada-40f4-a401-5ab2cab31922/home/public/stylesheets/compiled/basic.css) |
So, we can see that using SASS in Heroku could be a little tricky, because Heroku is a read only system except for the ‘tmp’ folder. This means that we have no way of compiling the codes into the public/stylesheets/compile directory.
Fortunately, we do have a solution for this. What we can do is, compile the source into the ‘tmp’ directory and then link them to the layout files.
You could find some plugins to do this. However, none of them really worked for me, so I fixed it manually, as I am going to show you now.
First of all, you need to change the path of the folder which is going to be used by Compass, to place the compiled .css files, as shown below:
1 2 | # File: config/compass.rb css_dir = "tmp/stylesheets/compiled" |
Next, create an initializer file. It doesn’t matter what you name it, but it is encouraged to keep it clear and concise. As for me, I named the file as ‘compass.rb’.
Then, copy the following code to the file:
1 2 3 4 | # File: initializer/compass.rb require 'compass' require 'compass/app_integration/rails' Compass::AppIntegration::Rails.initialize! |
What this code does is to basically integrate the Compass with Rails when the app is initialized.
Finally we need to tell the Rack middle-ware to set the “tmp” folder as the root folder, when the app requests for the ‘/stylesheets/compile’ folder.
To do this, open the config.ru file and add the following code :
1 2 3 4 | # File: config.ru require ::File.expand_path('../config/environment', __FILE__) use Rack::Static, :urls => ["/stylesheets/compiled"], :root => "tmp" run MyApp::Application |
That’s all there is to it!
When you are done, push your app to Heroku, restart the server and see what happens.
