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.
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
Transcript written by Miguel
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. :)
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"): ........
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.
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?
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.
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!
I believe it works by just setting the version on the gem you include.
gem "rails-assets-bootstrap", "1.0.0"
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!
You are correct. It'll use that latest version of the library. And thanks! :D
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?
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?