Ruby Weekly is a weekly newsletter covering the latest Ruby and Rails news.

How to Play with Rails 3.1, CoffeeScript and All That Jazz Right Now

By Peter Cooper / April 14, 2011

Maybe I'm weird (actually, there's no maybe about it) but when I first heard about Rails 3.1 getting CoffeeScript and Sass out of the box, I wanted to see how it worked and how smooth the process would be. So like quite a few people on IRC I've seen, I installed edge Rails (currently 3.1.0-beta) and got playing. (Yes, it's PRE-RELEASE. Expect mischief!)

I hit a couple of stumbling blocks on my way so I thought I'd explain what I found to be the smoothest way through to getting to play with the new Rails 3.1 goodies. I'll only take you as far as making some changes and seeing the results, though - you're on your own from there!

Note: This post was written in April 2011. If you are reading much later on, much of this post may no longer be relevant and you should refer to guides about installing the eventual full release of Rails 3.1 instead. If I remember, I'll update this to reflect that ;-)

Installing Edge Rails (Rails 3.1 Beta)

Being a conservative kinda dude with the versions of things I run, I hadn't run the edge Rails gauntlet for some time. I naively tried rails new myapp --edge and while it appeared to work and installed edge Rails, there be dragons (that even rake rails:update couldn't slay). So do it this way instead:

  • Head to whatever directory you use as the base for all of your git cloning. I'll assume ~/code from here on out.
  • Clone the Rails repository from GitHub with:
    git clone git://github.com/rails/rails.git

Creating a Bare Rails 3.1 App

Cloning edge Rails was the easy bit. Now let's create an app with the bad boy:

  • Head to whatever directory you want to use as the base for your Rails projects. I'll assume you remain in ~/code.
  • Create a new Rails app with:
    ~/code/rails/bin/rails new yourapp --edge

    It's important to note that we're explicitly calling the rails script that's in the edge Rails git repository we just cloned. And, of course, you can call the app whatever you like but I find yourapp to be both unique and catchy.

  • Enjoy watching your Rails app being created and waiting for Bundler to finish its work grabbing edge versions of all sorts of things.
  • Dive into your app's folder:
    cd yourapp
  • Check everything went OK so far by running:
    rails server
  • Browse to http://localhost:3000/ (or whatever is relevant in your case) and ensuring you get the usual Rails welcome page.
  • CTRL+C your way out of rails server and get back to the prompt.

We have a working but dead boring Rails 3.1 app on our hands. Let's get something happening and see what Rails 3.1 is rocking in the CoffeeScript and Sass departments.

In the interests of having something running as soon as possible, we'll lean on the scaffold generator to get some default, core team approved model, controller, and view code up and running. Simply:

rails generate scaffold Link title:string url:string slug:string visits:integer

Yes, it's an example model for a URL shortener (the new "hello world" or "blog in 15 minutes" project)! That doesn't matter though - you can do whatever you like.

Don't forget to run:

rake db:migrate

I did ;-)

Sprockets - Asset Packaging Shenanigans!

Run rails server again now and browse to http://localhost:3000/links/ - pretty typical scaffolding fare, right?

View the source though and check out the <head> section:

If you dig into application.js and application.css (as they're being served up by the server), you'll notice that they're a bit different to the same files in older Rails apps. They contain JavaScript code and CSS code respectively but if you look through the /public folder in your app, those files are nowhere to be found. Shenanigans!

Or not. Sprockets is merely at play, melting and merging down multiple CSS and JavaScript files into a single gooey lump to send to your Web browser.

Playing "Hunt The JavaScript and CSS"

We're getting CSS and JavaScript being served up through application.css and application.js just fine then, but where are they coming from? Here's a clue!

Oh yes, there's a app/assets folder and its beautiful children javascripts and stylesheets. It seems these two fine specimens will become our friends when we make the transition to Rails 3.1.

You may notice that my file tree doesn't look quite the same as yours. That's because I've already started playing with CoffeeScript and Sass by creating an app/assets/javascripts/awesome.js.coffee file and a app/assets/stylesheets/scaffold.css.scss file (the latter just being a rename of the scaffold.css file you already have).

If you take a sneaky peek into application.css you'll notice there's not really any CSS in there. Merely a comment with a directive like so:

/*
 * FIXME: Introduce SCSS & Sprockets
 *= require_tree .
*/

require_tree is just telling the system to bundle together everything from the stylesheets folder into a single file. Awesome - thanks Sprockets!

Playing with Sass

To have a play with Sass first, rename scaffold.css to scaffold.css.scss. If you then reload the /links page in your Web browser you'll notice little difference. Why? Because Sass (or, more specifically, SCSS) is merely a superset of CSS and any existing CSS will work with it!

Open up scaffold.css.scss and you'll see it's pretty boring. It's just the standard stuff that comes with Rails after all. The first section looks something like this:

body { background-color: #fff; color: #333; }

Let's say we want to keep our background and text colors in variables so we can use them throughout our CSS later (meaning we only have to change a couple of variables instead of hundreds of references if we want to retheme our app). Rewrite the previous section to:

$background_color: #fee;
$text_color: #000;

body { background-color: $background_color; color: $text_color; }

Here I've assigned the colors to variables and then use the variables in the CSS. I've made some minor changes to the colors too so that I can definitely see a difference when I reload the page in my browser.

And, well, that's it. That's the absolute bare basics of using SCSS in Rails 3.1. Dead simple. Stick .scss on the end of a filename to trigger the SCSS/SASS parser and you're cooking with gas.

Playing with CoffeeScript

At the time of writing, the application.js file is a wee bit broken as it has a comment that's not being parsed out. Since this stuff was only added on the very day I wrote this post, I'll let them off. But in case it's broken for you still, get application.js looking like this:

#= require jquery
#= require jquery_ujs
#= require_tree .

These directives should remind you of the equivalent in application.css. As with there, they include other JavaScript files into application.js when it's served up. You get jQuery, the "unobstrusive" jQuery helpers for Rails, and any other files in the javascripts folder (currently none).

To give CoffeeScript a try, create a file called awesome.js.coffee in the app/assets/javascripts folder and populate it thus:

square = (x) -> x * x
alert square(10)

If you refresh the http://localhost:3000/links/ page again now, you'll have an annoying JavaScript alert window popping up with "100" in it (the result of square(10)).

This isn't the time or place to dig into what CoffeeScript does or how it works but.. you've just played with it nonetheless ;-) If you want to learn more about it, its official homepage is packed with useful stuff.

Like the street walker I picked up solely to use the car pool lane, I'm going to dump you off at the curb here in the middle of conversation. It's been fun. Good luck and have fun breaking Rails 3.1. If you find any really nasty bugs, be sure to either raise a ticket so the lovely Rails developers can make Rails 3.1 even better or, y'know, submit a patch yourself.

Want to show some appreciation after this lovely blog post? Check out the Ruby Weekly and JavaScript Weekly e-mail newsletters or pass them on to your buddies or co-workers. People are loving them and they're doing great but the more the merrier!

Comments

  1. Eric Anderson says:

    Good to see what they have planned for Rails 3.1. I recently started using Sprockets 2 in my Rails 3.1.x app. It took a little digging to figure out how to set things up (and my setup is a little different from what it looks like they are going to do in Rails 3) but for those wanting to go ahead and play with this goodness check out the guide I put together on the subject a few days ago.

    https://gist.github.com/911003

  2. Peter Cooper says:

    Thanks Eric!

  3. Darcy Laycock says:

    Or if you just want to play with CoffeeScript in your Rails {2,3} application / Sinatra or Rack application, you can also try out barista right now ;)

  4. Patrick Muldoon says:

    scaffold.css.sass should be scaffold.css.css above. Being new to sass/scss following along with the above caused the Sprockets to complain about syntax..

  5. aaron says:

    How is Rails 3.1 dealing with the Sass compilation? Is it on-the-fly? Is there a rake task? Is it cached in the production environment?
    Same question for sprockets and coffescript.
    Another great article Peter!

  6. Peter Cooper says:

    @Patrick: Odd. It works fine for me. Without the "sass" I ended up with non-compiled code. But.. they're tweaking edge Rails all of the time so a lot of what's in here could go "off" quite quickly ;-)

  7. John Paul Ashenfelter says:

    Starting with a clean rvm ruby 1.9.2 gemset, I had to install bundler and i18n to get things moving. Just FYI.

  8. Patrick Muldoon says:

    @peter. Yep all depends on which revision you get I would imagine. But if you look, in the "Playing "Hunt The JavaScript and CSS" section you called it "scaffold.css.scss" and in "Playing with Sass" you called it "scaffold.css.scss". Which is where I think the confusion is coming from. Regardless thanks for the post...

  9. Patrick Muldoon says:

    bah.. More coffee (and coffeescript needed..) "playing with sass" section file is called "scaffold.css.sass".

  10. Andy says:

    Just wondering .. we'll write CoffeeScript and then debug JavaScript on Firebug??

  11. Dr Nic Williams says:

    I had to remove the following comments in application.js to get the coffeescript working:

    # FIXME: Tell people that this is a manifest file, real code should go into discrete files
    # FIXME: Tell people how Sprockets and CoffeeScript works
    #

  12. Mislav Marohnić says:

    @aaron's complaint was in the right place. You've mixed Sass and SCSS as if they were interchangeable. They are different, incompatible synaxes. SCSS is a superset of CSS and files of that type should end with ".scss". Sass is unlike CSS, so you can't just rename a file from ".css" to ".sass" and expect it to work.

  13. Peter Cooper says:

    Mislav: Thanks. It turns out the mismatch was the other way around. I got the filename wrong rather than the superset assumption. My screenshot shows .css.scss whereas I wrote .css.sass, but meant the former. Thanks to everyone who hinted at this and I've now fixed the filename. (Rather than the stuff about Sass, because SCSS is the new, approved technique ;-))

  14. Chris says:

    When I run "rails new ..." it complains about i18n :

    /rails/activesupport/lib/active_support/i18n.rb:2:in `require': no such file to load -- i18n (LoadError)

    so i installed the latest i18n gem (0.5.0) with "gem install i18n" and i still get the error. Any idea what's wrong?

  15. vudu says:

    I got the same error as the above ...no such file to load -- i18n (LoadError)

    So I added require 'rubygems' to active_support/i18n.rb

    Which allowed me to fire up the new app

    Then bundling ...

    Updating git://github.com/sstephenson/sprockets.git
    error: cannot open FETCH_HEAD: Permission denied

    An error has occurred in git when running `git fetch --force --quiet --tags "git://github.com/sstephenson/sprockets.git" refs/heads/*:refs/heads/*`. Cannot complete bundling.

    bummed. looks like fun.

  16. vudu says:

    Doh, 'Permission denied', gotta sudo, rookie. Ok, no more spam, cheers.

  17. aaron says:

    @Peter, @Mislav. Hehe, I wasn't being snarkey, I really liked the article. I want those answers. It totally looks trolley though ;)

  18. Daniel Berger says:

    Why didn't they choose RubyJS? And, I have the same question that Andy has. How will we debug it?

  19. Lars Smit says:

    After you created the links scaffold, you need to do a DB migration:

    rake db:migrate

  20. Jean-Baptiste Barth says:

    Great howto, thanks ! I had some trouble though on Ubuntu with an RVM-based ruby environment, so I made a blog post about it, check my website if you're under Ubuntu (TL;DR: needed an alias for "rails", and to install a JS runtime, because Ubuntu don't have any by default).

  21. Dan Croak says:

    Same as Dr. Nic. Had to delete the first three lines of application.js to get awesome.js.coffee working.

  22. Marc says:

    Followed the instructions to the T, and keep getting:

    Started GET "/assets/application.js" for 127.0.0.1 at 2011-04-16 21:37:16 -0700
    [Sprockets] /application.js building

    ExecJS::RuntimeError (TypeError: Cannot call method 'write' of undefined
    at /var/folders/MJ/MJVJXVDlH2ua+mbx7TGGv++++TI/-Tmp-/execjs20110416-13726-1pglicv:12:20
    at /var/folders/MJ/MJVJXVDlH2ua+mbx7TGGv++++TI/-Tmp-/execjs20110416-13726-1pglicv:26:16
    at /var/folders/MJ/MJVJXVDlH2ua+mbx7TGGv++++TI/-Tmp-/execjs20110416-13726-1pglicv:1:121
    at Object. (/var/folders/MJ/MJVJXVDlH2ua+mbx7TGGv++++TI/-Tmp-/execjs20110416-13726-1pglicv:1:138)
    at [object Object]. (node.js:927:23)
    at [object Object].emitSuccess (node.js:259:13)
    at [object Object]. (node.js:652:21)
    at [object Object].emitSuccess (node.js:259:13)
    at node.js:509:29
    at node.js:988:9
    )

  23. Marc says:

    Scratch my prior comment. I had an old version of Node installed. After upgrade, everything's working as expected.

  24. Peter Cooper says:

    Yeah, I did make the point ;-)

    At the time of writing, the application.js file is a wee bit broken as it has a comment that's not being parsed out. Since this stuff was only added on the very day I wrote this post, I'll let them off. But in case it's broken for you still, get application.js looking like this:

    Also, RubyJS? The thing that hasn't been updated in over 2 years..?

  25. Evan says:

    Any idea whether Rails 3.1 will support js and css compression (rather than just concatenation) in it's final version?

  26. Peter Cooper says:

    @Lars: Thanks! You're right - I've updated it.

  27. Étienne says:

    To avoid the aforementioned problems with i18n, I had to cd into the rails directory and use bundle exec:

    $ bundle exec bin rails new ../yourapp

  28. Andrew says:

    After I installed i18n and bundler it game me the message:

    Thor is not available.
    If you ran this command from a git checkout of Rails, please make sure thor is installed, and run this command as `ruby /Users/andrewgertig/documents/ruby/rails/bin/rails myappname --edge --dev`

    After installing thor I then ran the above command but with the addition of "new" between rails and myappname.

    Then it worked smoothly.

  29. pogodan says:

    Instead of installing an edge bundle and then creating a new app from that, we wrote up some instructions on installing edge into a new gemset/bundle and then installing the app on top. Should be pretty foolproof

  30. Johnneylee Jack Rollins says:

    You can also just do rake install in the rails repo and get all the 3.1.0beta gems.

  31. Johnneylee Jack Rollins says:

    Actually, it's evidently broken, try rake all:install

  32. drymlover says:

    Hey folks, on the HAML front... Haven't you ever seen or played with DRYML? I mean seriously, this eats HAML for breakfast, vomit's it during brunch, it's it again for lunch and then eats ERB for dinner.

    If you've not seen it, you seriously owe yourself: http://bit.ly/dryml

    This is better than sex on the beach... ;) Yeah, heh, talking about the drink.

  33. Mike Bethany says:

    One way to use Rails 3.1 beta without worrying about messing up your existing install is to use RVM and create a new gemset: `rvm 1.9.2@rails_beta --create`.

    Then you can muck about all you want and not have to worry about beta sneaking into production code... as long as you remember to switch back.

  34. Pingback: Trevor Turk — Links for 5-17-11

  35. Pingback: A Rails Developer’s impression of CoffeeScript – Part 2 | Vinsol - Leading Ruby on Rails Development and Consulting Firm in India

  36. Murray Bozinsky says:

    Why is rails adding more redirection that only results in more places where something can go wrong?

    All this stuff has its place, but like REST and Bundler, this crap should be in opt-in plugins, not opt-out.

    At some point Rails needs to not break everyone's apps on minor point releases.

    DHH has gone off the rails. it seems like anything remotely trendy gets stuffed into rails, bloating the framework, for no other discernible reason other than it is trendy.

    DHH is messiah of the cargo cult.

  37. Pingback: Posts, tutoriais e screencasts para RoR devs | Chris B.

Other Posts to Enjoy

Twitter Mentions