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
Join 31,152+ developers who get early access to new screencasts, articles, guides, updates, and more.