Skip to main content

24 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

Javascript Frontend


Transcripts

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:

app/assets/javascripts/application.js

//= require sweetalert-dev

And

app/assets/stylesheets/application.css

*= 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.

Discussion


Gravatar

@chris. What do you think about Bower to manage all the front-end stuff?

Gravatar

+1 for Bower, it's actually pretty straightforward to introduce in a Rails app.

Gravatar

Bower is pretty great and I plan on doing an episode on integration with that in the future. This episode was designed mostly for explaining if you're using something obscure that has no gems or packages at all for it (including Bower packages).

Gravatar

That would be nice to see!


Gravatar
Gravatar

Yeah I'll be doing a screencast for that in the future!


Gravatar

Chris - how did you add the JS to the delete button in your code?

I'm trying to use sweet-alert-confirm gem to show the new alerts on standard delete links but I can't get the alert to show.

Looks like you don't use the sweet-alert-confirm gem but you're getting the results I want. Can you show the code?

Gravatar

Great question! I answered this on your forum post: https://gorails.com/forum/h...


Gravatar

This is nice thank you Chris. Some external javascript libraries exist on the internet. What is better to have the JS file in your app or link to the js file via the internet? In this video you've downloaded it, but how would you add it to your rails app if you simply wanted to link to the js file via the internet? chrs

Gravatar

If you want to use an external JS file you can just include the script tag that points to it in your layout.

The reason why you would want these inside your Rails app is that they can be included and minified inside your code reducing the number of files the browser has to download. It's faster and more efficient for your users which makes it a good idea.


Gravatar

Nice! just a (silly) question: if the plugin - eg a slider - we want to use includes icons, like "pause", "play" or navigation buttons etc, then in this case need to add them on a vendor/images folder and set the paths (relative) on javascript properly to link to the icons and not seem broken, right?


Login or create an account to join the conversation.