Skip to main content

21 Manage Assets With Rails Assets

Episode 61 · June 25, 2015

Rails Assets makes it super easy to use the latest versions of frontend libraries

Frontend


Resources

Transcripts

In this episode we're going to talk about using rails assets to manage your front-end libraries in your rails app. Rails assets is this thing built on bundler and Bower, and you're probably familiar with bundler already, it's the thing that manages rubygems in your rails apps, and bower is very similar for front-end libraries. Actually, if you were to go to bootstrap's repository, you'd see a bower.json file, and if you open this up it's just some regular old json, but it's very similar to the gem spec in a ruby gem. So it says where the homepage is in the description, and it's definition of what are the important files to distribute in this package, it also mentions dependencies, and this is convertible using rails assets into a ruby gem. One of the things that people were quick to point out was that making your own gem for a front-end library is a bad idea. This is something we've done for years, and when the maintainer stops maintaining it, or they don't need it anymore and they give up on updating the gem, that becomes a problem. Some people have to fork it, and they have to make their own gem, or use it straight from GitHub, and that kind of becomes painful. Rails assets was designed to solve that problem. I wanted to make sure that we talked about that before, so you can see why this makes sense, and why it's important that we have this.

How do we use Rails-Assets? It's actually really really simple. You just add a block to your Gemfile, with the libraries that you want to include, and that's it. You can search for any of the libraries, like we made that SweetAlert gem, and already there's four different sweetalert libraries here, so there's a bootstrap one that I didn't even know existed, things like that which is pretty cool. Rails-Assets is definitely popular, and all you have to do is add these gems, and add these requires. Let's go take a look at adding bootstrap to a rails app and see how it works.

Here I've got a brand new rails app with one controller and a main action, index. That's it, there's nothing to it, but by default you can see that the default looks like "Times New Roman", just a default font for an html file without styles. Let's go add bootstrap in and we should see the text change and all the includes happen. If we open up our Gemfile here, you can see here at the top we have a source for rubygems.org, and that is basically saying all of these gems by default should be pulled from rubygems.org, now the way that a gem server works is open source, so rubygems.org is the primary place for all of this and it's maintained by a bunch of amazing people, but you don't always have to use rubygems.org, and that is how Rails-Assets works. rails-assets.org is it's own gem server, and here you can say: Let's use the Rails-Assets server instead. This is really neat, because it allows us to configure which gems come from where.

Gemfile.rb

source 'https://rails-assets.org' do 
    gem 'rails-assets-bootstrap'
end 

All of these Rails-Assets gems are going to start with rails assets, and that is just a namespacing thing they've done. They didn't have to, but it makes a lot of sense because then the names don't conflict with normal gems that you might use. This is really all we have to do in order to install bootstrap from Rails-Assets. We tell it in the block that it's going to come from this other source, and then we give it the gem name, and that is it. We can hop into the terminal, and we can stop our rails server, and we can run bundle to install the gem. You will probably see at the top here, because I've already done this, you'll probably see that it's loading metadata from Rails-Assets, and mine doesn't do that because I've already tested this to make sure it was working. So I've already downloaded those things, but you'll notice that it will pull things from rails-assets.org when you do this for the first time. And then in your application, all you have to do is go to application.js and load bootstrap here, and then, in your application.scss, you can *= require bootstrap there. If we hop back into the terminal, restart our rails server, we should be able to refresh this page once that's loaded, and the fonts change, and the colors change. So we're actually loading bootstrap from Rails-Assets, and it's as simple as that, that was really really easy, and we have bootstrap css, and all of the jQuery and bootstrap JavaScripts and things like that too. All of that is being loaded appropiately, and you'll also notice that when the Gemfile defines bootstrap here, it actually also pulls rails-assets-jquery, so going back to bootstrap bower.json, we can see that because there's this jQuery dependency, Rails-Assets converts that into a gem dependency, and then generates a package for jQuery as well, so it's going to grab the latest rails-assets-jquery, and that is going to be how that works, which is really cool. So it knows how to handle that and it actually even removes requiring jQuery from your application. That's kind of amazing, that it does all this stuff, so you wouldn't need to use the jQuery rails gem, you could use Rails-Assets to load jQuery for you instead. So yeah, Rails-Assets makes a wonderful way of managing all of these assets in your rails apps, and we don't have to do that much work and probably my favorite part here is that if we were to go to bootstrap, and you click on the version that you want to load, it will show you the gem that you need to require, it tell you which JavaScript and CSS files it requires, it shows you which scripts are available: bootstrap.js, bootstrap.scss, and then if you ever see that this isn't the latest version. Imagine bootstrap 4.0 came out today, but there was no Rails-Assets gem for it, you'd just search for it and click "Rebuild", and that would be it. It should go and pull down the latest version of bootstrap and compile a new gem for you, and then that would be it. You don't have to rely on other people to update their gems and release to rubygems. Rails-Assets handles all of that for you, so it makes for a tremendous amount of time saving for people, it also works with Sinatra, and if you want to check out how this works, they have a GitHub that you can see all the source code for this. If you're curious about how this works, take a look at app/models/build directory, and this is actually where most of the magic happens. They have a bower component, class here, and a converter class, and the converter is the one that handles the processing of those bower components into rubygems, and you have all the helper things for converting that, so there's actually quite a bit of work that goes into it, but it's reasonably simple, it's not actually that complicated. If you take a look at all of that, that is pretty much it, this rails app just otherwise, if we take a look at the routes file, you can see that there's not a whole lot going on in here, so they have all the basics as you would expect for being able to access all of the packages from the Rails-Assets website, and that's really it, they have not too much stuff going on. The real magic comes from converting that bower package component into a rubygem. If you've already got your rails application set up with the front-end library in a gem, or you've pasted it into your app/assets or vendor folder, don't worry about it so much, but I would definitely recommend moving to Rails-Assets as you go along. You can really easily just update your Gemfile, and start swapping things out with their appropriate gem from Rails-Assets instead. So you can just remove those if you haven't made modifications in your app/assets folder, you can just remove them from there and swap with the reference to this gem instead. Or, you could swap out the reference to like bootstrap-sass gem with the Rails-Assets bootstrap gem, and that's really it. You can make a conversion pretty easily, and I definitely recommend starting along new apps with rails assets, because it's just that handy. That's it for this episode, I will talk to you next week.

Transcript written by Miguel

Discussion


Gravatar

Love rails assets. I first found out about it about a year ago, and it quickly became one of my favorite ways to grab front end libs. :)

Gravatar
Jamie Barton on

I found it only a few weeks ago. I love how easy it is to use. Absolutely brilliant.

Gravatar

It's really, really well done. Props to the authors!


Gravatar

Great sample thanks!


Gravatar

I have many app using asset as regular mode and this the first time hear about rails asset. Thanks for that. I'm going definitely change to this

Gravatar

I'm definitely migrating over some older apps too! :)


Gravatar

Great Stuff Chris... This is definitely a better way to add frontend libs. One more tool for the toolchain....


Gravatar

So awesome! I was using bower-rails and was not aware of this option. Thanks so much for sharing Chris!


Gravatar

That's awesome, Thank you Chris I never thought a such thing exists... But does this work for all libraries ? after watching the video I tried rails-assets-ckeditor but it seems that I am getting errors like ActionController::RoutingError (No route matches [GET] "/lang/en.js"): ........

Gravatar

It should, but with more complex things like ckeditor, you might have to have those lang/en.js files compiled separately. Something like this based upon the filename in the Rails Assets gem.

config.assets.precompile += %w( lang/en.js )

This is definitely one part where the documentation with Rails Assets is poor.


Gravatar

Hi I am trying Rails Assets but I approach to a problem. I included Bourbon but when I tried use any mixin Rails told me that mixin is undefined. What to do?

Gravatar

If you haven't tried this already, you'll probably want to include bourbon with @import instead of the require statements so you can use it in your sass code.


Gravatar
Mohnish Jadwani on

Thanks for sharing a screencast on this Chris. Recently we used the same thing in one of our client projects. As a first timer to it back then, I found it a little difficult to figure out where could I find runtime dependencies to the gems I'd like to use from the Rails Assets site. I've written a blog( http://www.cybrilla.com/blo... ) on how one could find runtime dependencies for the gems they'd like to use via Rails assets.

Gravatar

Awesome post! Thanks for sharing that Mohnish.

Gravatar
Mohnish Jadwani on

Thanks for the encouragement Chris. Really glad you found it useful :)


Gravatar

Great video. I experimented by switching out my bootstrap-sass gem. The one thing I'm not understanding, is how do you tell rails-assets the version constraints you would like to stay within like the convention with rubygems? Thx!

Gravatar

I believe it works by just setting the version on the gem you include.

gem "rails-assets-bootstrap", "1.0.0"
Gravatar

Thanks for the quick response Chris. I'm assuming that if an explicit version is not specified, rails-assets will take the latest available version then... correct? Love the videos!

Gravatar

You are correct. It'll use that latest version of the library. And thanks! :D


Gravatar
chasefoto on

Hey Chris - how are custom styles handled? Do we simply place them into the application.css file? Or are we required to build a separate customization file?

Gravatar

If you're trying to customize something like bootstrap, you can do this: Instead of doing the *= require bootstrap, you can do @import "bootstrap" to import the file using SASS and put your custom variables above the import to override the defaults.

Basically it doesn't change from how you would normally do it, but it can be a little unclear since they don't give you any instructions. Does that make sense though?

Gravatar
chasefoto on

Yep, that makes total sense. Thanks for clarifying that for me Chris!


Gravatar

I often had kind of feeling that using bower and rubygems for such simple task as fetching vendor assets is too much overhead. So I wrote https://github.com/torba-rb.... Please, check it out.


Gravatar

great video, thanks!


Gravatar

greatwork Chris


Gravatar

Awesome Awesomer Awesomesttttt! I was using bower-rails and was not aware of this option. Thanks so much for sharing Chris!


Login or create an account to join the conversation.