Skip to main content
Javascript and CSS Asset Pipeline:

Including Javascript and CSS Libraries With Rails

Episode 57 · May 26, 2015

Learn how to include 3rd party Javascript and CSS libraries with the Rails Asset Pipeline

Frontend Javascript


Earn a free month

This episode I'm going to address a question from one of the subscribers and that was: "How do we add JavaScript plugins into your rails app, that don't have a gem?". I'd like to make an alert button here, when you click delete, I would like to show a proper nice little modal alert and the library I'm going to use is called Sweet Alert, and this one already has a gem, but we're going to pretend it doesn't exist and we're going to talk about how to put the JavaScript and CSS files into your app if it didn't have a gem.

For example, this makes a little modal here when we click a button and we just have to run this code, and I've already plugged that in for these delete links so right now it doesn't work when you click on these, (I'm clicking on this), it doesn't do anything. But you can see at the bottom of chrome it says: javasript:sweetAlert and it's going to run that javascript code, so we just need to download the source code for this. I've already scrolled down to the download section and grabbed the files and if we open up our finder here: this is the sweet alert source code. So this one happens to have a folder called dist and it has three files in it. Two of these are JavaScript files, and one is a minified version, so it's already compressed and ready for production, we're not going to use that because the asset pipeline will already take care of minifying it when we deploy to production, so we're just going to use the full version with the original source code so that when we have any errors in development, we'll be able to easily see where that code was, so it's really simple to put these JavaScript libraries into your application if they don't have a gem, and that is as simple as going into your app folder which I have open here, so I have the app/assets folder open, and you can just paste them in, and you can move the JavaScript one to the javascript's directory and the CSS to the stylesheets directory. You want to make sure that when you open up your app/assets/javascripts/application.js it's going to require tree so that it will grab that file.

As long as you have this in there, it will automatically be included on the page on the page. You can refresh and click Delete and it will run the JavaScript that's already connected because it loads it into the page with the require tree and voila, that's it.

The same thing goes for the CSS file, being in there, if you include the require tree line it will load it and you will get this pretty modal window and that's all you have to do, if you want to include a random JavaScript plugin into your application that doesn't happen to have a gem. I actually want to talk about this a little bit deeper because this isn't the ideal way to do it.

You have a directory called vendor, that is specifically designed for this, and it's rarely talked about and it's used way as it is anymore but this is a directory for third party libraries. Originally, before bundler existed the vendor directory used to save a bunch of copies of your gems in there because you want to use the vendor folder for things you never want to edit, so you want your app directories and all these other directories to just contain the files and code that you write.

Inside this javascript's folder, this sweet alert file shouldn't actually belong there because you didn't write it and you're probably never going to change it, you don't want to change it because if you ever have to upgrade you're going to lose your changes or they will be very hard to merge in with the new version, so it's not a great idea to put them in your app/assets because these should just be available but they shouldn't be in this directory and tempt anyone to edit that.

What we're going to do is go into the javascript's directory and we're going to move this file into vendor/assets/javascripts and we'll do the same thing with the stylesheets.

This means that we now need to update our application js and application CSS to grab these files, because when we're looking in the tree, it's going to look in the javascripts folder and it doesn't exist in there anymore, and that's why you're going to have to put:


//= require sweetalert-dev



*= require sweetalert

Saving that and refreshing the page, it should all be working again but this time you have your third party libraries sectioned off in their nice clean vendor folder, and that's basically what happens when you use a gem. It puts it in a separate place so you're not ever tempted to edit those third party libraries to override the stylesheets or something like that. And that's basically it, make sure to put your third party libraries in the vendor/assets/ folder and keep it as simple as that. If it doesn't have a gem, I would highly recommend you making one and I think I'll talk about that in the next episode because that makes perfect sense as a follow up.

If you have any of those things that you need to do, you can first dump them into the vendor folder and then just making a gem out of it makes it easier for everybody to install and to upgrade and all of that so you'll always know in your Gemfile which version of the library you're using . We'll talk about that in the next episode.


Subscribe to the newsletter

Join 31,353+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.