Skip to main content
Javascript and CSS Asset Pipeline:

How To Create A Gem For Frontend Javascript And CSS Libraries

Episode 59 · June 9, 2015

Learn how to create Ruby gems for including frontend Javascript and CSS libraries in your Rails apps

Frontend Gems


Earn a free month

In episode 57, I took a look at integrating the SweetAlert JavaScript library as a third party library that we would just include into our rails app without using a gem. We basically go and integrate this modal dialog into our app by downloading the JavaScript files from their website, and then putting that into our rails app, and we can see the result here. This worked really well, and we simply dropped the sweetalert JavaScript and CSS into the vendor folder. The reason why we put it in vendor assets was because this was a third party library that we don't want to edit, so we can easily upgrade it in the future. The code that you are writing specific for this application belongs in app/assets, and third party stuff or sharable code should go into vendor/assets, you want to even further extract these libraries when you're planning on using it on multiple applications. In this case, sweetalert we might want to use in our next application, and it would make sense for us to, rather than copying these files into the application, to pull these out into a gem that supplies a front-end JavaScript library. You've probably used bootstrap-sass or any of those gems like that that provide front-end JavaScript or CSS, and we're going to talk about how to create a gem like that today.

The way this works is really simple. We're going to create a new gem bundle gem sweetalert Once we have the sweetalert gem, we can open it up in our editor, and the only thing we need to edit in here is the lib/sweetalert.rb file. The rest of these, you can go into at your own time, but the one that we need to focus on, and the one line of code we actually need to write is a class in here called Engine, this is going to inherit from Rails::Engine, and this is more or less saying that when rails loads this gem, it's going to look for this Engine class, and if it's defined, it's going to treat this gem's directory structure a little bit differently. It's going to work sort of like your rails application, almost as if you had a rails app inside of a rails app. How that works is by copying these directories over, so we're going to take the cp -R todolist/vendor sweetalert and copy this into the sweetalert gem. This is the exact same vendor/assets/javascripts file and stylesheet that we had in our rails application, and if we switch over to that, we're actually going to have to delete these two files out of it, so I'm going to do that in the terminal, and I'm going to remove the rm todolist/vendor/assets/javascripts/sweetalert-dev.js todolist/vendor/assets/stylesheets/sweetalert.css Those two are removed, and we can go back to the rails app, and this time we could say: Let's include the sweetalert gem, and we're going to load it locally from a path, and we're going to use

gem 'sweetalert', path: 'Users/gorails/code/sweetalert'

Add the gem in, and we can turn off our rails server and run bundle to make sure it loads this gem from the directory, and we can restart our rails server, and we can go back to our rails app, refresh the page, and if we click the delete link, we will still get the dialog that we got from sweetalert, only this time, there's no css or javascripts inside of our app that is entirely being found from the sweetalert gem, and our application.js is still requiring file names as the file, but it's now inside of the gem. This class of Engine inheriting from rails engine is basically going to tell rails: When you load this gem, you also want to add these directories to the load path, so anytime you add a gem that has an engine inside of it, rails will say: Ok, we search for javascripts or stylesheets in the asset pipeline for compiling or rendering to the page, but we're also going to look in the rails app, the vendor directory and the gem, and the vendor directory inside of the gem as well. With that, you can pop into the gem directory and run rake release after you've updated the gemspec with your proper summary and all of that, and then once you run this, it will ask for your credentials for, it will log you in, it will release the gem for your very first version and once you've done that, make sure you post a link to it in the comment section below, and share it with the rest of the people watching this, it's really awesome. I've definitely encourage you to release a gem for front-end library if you come across one that needs it, and start maintaining some open source stuff, that's fantastic. If you have any other JavaScript or front-end related questions that you would like to see in episodes, let me know in the comments as well, and with that, I will leave it to you, and your challenge is to go build a gem for a library that could use one, and I will talk to you next episode

Transcript written by Miguel


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.