Gemify your assets in less than 10 minutes.

If you develop a javascript library for some useful purpose and you share it with the community, you are a great person. But besides that, if you translate that into a Rails gem to use in any Rails project, you are a wonderful person. Today we're going to see how we could make a Rails gem in order to have our super fancy javascript library available to add in any gemfile.

First step, let's do a super fancy javascript library

For this example, the first thing we have to do is our javascript library. Some super simple but funny thing, e.g., a javascript library to add random Giphy gifs in our HTML. Because the purpose of this post isn't develop this library, let's pretend that we have developed and looks like this:

/** * Core and general tools */ ( function ( $ , undefined ) { 'use strict' ; // Singleton if ( typeof window . RandomGiphyImageRails !== 'undefined' ) { return ; } // // Module general vars // var v = '1.00 beta' , debug = false , data = { api_key : 'dc6zaTOxFJmzC' , query : 'happy' , element_class : 'giphyme' }; // // Methods // // Adds Giphy gifs into the elements with class data.element_class function giphyme () { var elements = $ ( '.' + data . element_class ); $ . each ( elements , function ( key , value ) { if ( this . debug ) console . info ( value ); updateGiphyImage ( $ ( value )); }); } // Return Giphy gif URL string. function updateGiphyImage ( element ) { $ . ajax ({ method : 'GET' , url : 'http://api.giphy.com/v1/gifs/random' , data : { api_key : data . api_key , tag : data . query }, success : function ( response ) { if ( this . debug ) console . info ( response . data . image_url ); element . html ( '<img src="' + response . data . image_url + '" alt="Gif via Giphy" />' ); }, error : function () { if ( this . debug ) console . info ( 'Giphy Api call error.' ); } }); } // // Public methods / properties // window . RandomGiphyImageRails = { debug : debug , data : data , giphyme : giphyme }; }( jQuery ));

With this library, we could do something like this:

$ ( document ). ready ( function (){ // Set debug mode (for console logs) RandomGiphyImageRails . debug = true ; // Testing api key by default if you don't specify one RandomGiphyImageRails . data . api_key = 'YOUR_GIPHY_API_KEY' ; // Class of the HTML element where you want to put the gif RandomGiphyImageRails . data . element_class = 'giphyme' ; // Query or tag of your random gif RandomGiphyImageRails . data . query = 'nintendo' ; // Executes the random gif thing RandomGiphyImageRails . giphyme (); });

And then put one or more HTML tags in your views:

<body> <div class= "giphyme" > </div> </body>

Refresh your page and... voila! :)

Wow! Awesome! So... let's gemify this jewel!

An asset gem is just an extremely simple engine. Bundler makes it simple to create the files and directories necessary for creating a gem. We only have to do the follow steps:

$ bundle gem random_giphy_image_rails

This will create basically the following tree:

. ├── Gemfile ├── lib │ ├── timeago │ │ └── rails │ │ └── version.rb │ └── rails.rb ├── LICENSE.txt ├── Rakefile ├── README.md └── random_giphy_image_rails.gemspec

Turn the gem into an engine

Bundler create the gem as a standard Ruby module, but we want it to be a Rails Engine. So in our lib/random_giphy_image_rails.rb file we are going to specify this:

require "random_giphy_image_rails/version" module RandomGiphyImageRails module Rails class Engine < :: Rails :: Engine end end end

All we're doing here is declaring the gem as a Rails Engine. This will cause Rails to add its directories to the load path when the gem is required.

Next step: add our javascript library. We're going to create in our gem the directory vendor , with directories stylesheets , javascript and images inside, so we finish with something like this:

. ├── Gemfile ├── lib │ ├── timeago │ │ └── rails │ │ └── version.rb │ └── rails.rb ├── LICENSE.txt ├── Rakefile ├── README.md └── random_giphy_image_rails.gemspec └── vendor └── assets ├── images ├── javascripts │ └── random_giphy_image_rails.js └── stylesheets

Make a simple readme file with the gem as documentation, and we're done! Ok no... it remains one last step.

Push it to GitHub & RubyGems

Create a GitHub repository for the gem, stage all of your commits, commit, and push the code to GitHub. If you've never published a gem on RubyGems before, you'll need to sign up for an account there. Your account settings will contain an API key that should be copied to ~/.gem/credentials . Publishing your gem is as simple as:

$ rake release

Yes now! Finally we're done. From here we can use our newly released Rails gem in any project by simply adding to our Gemfile:

gem 'random_giphy_image_rails'

and then execute:

$ bundle

or install it yourself as:

$ gem install random_giphy_image_rails

Then, add this into your application.js file:

// = require random_giphy_image_rails

Oooooooooooooh yeah!

Any place where I can see the result?

Yeah! Here you have the Github repo for this example, so you can clone it, change it, play with it... whatever you want! :)