All threads / How To Create A Gem For Frontend Javascript And CSS Libraries | GoRails - GoRails
Ask A Question


You’re not receiving notifications from this thread.

How To Create A Gem For Frontend Javascript And CSS Libraries | GoRails - GoRails

Chris Oliver asked in General

Great tutorial!
Just released my first gem [viewport_units_buggyfill](

Not sure if it is good to name my gem with underscores, or should i rename it with dashes?

Awesome!! Congrats on the release! :) I prefer underscores because dashes sometimes get parsed as modules.

This is plain awesome! Thank you for posting this video.

How would you handle the gem name being different than the library? For example, instead of ‘sweetalert’, something like ‘rails-sweetalert’.

Yep! I think a lot of people do 'whatever-rails' and that's probably what I would recommend. You can do any naming scheme you want, but that seems to be the most common and it's good for SEO too.

What I mean is, how do you change the manifest and everything if the gem's name is not the same as the library? The video's procedure counts on it being the same name. What if it's different?

Oh sorry, I misunderstood! The best gems are always the ones where the name matches so the auto-require works nicely.This is an explanation of how the dashes work and how it affects the classes and modules of your gem.

Kevin Sylvestre ·

Another option for packaging in JS and CSS libraries that integrate Bower (sweetalert does) is to use an additional gem source: If you include the source you can use: `gem 'rails-assets-sweetalert'` (each bower component is packaged using a `rails-assets-` prefix).

Cullen Murphy ·

Yes. Please. Bower integration is _SO_ much easier to work with than having a bunch of people maintain these javascripts gems.

Cool!!, thank you so much, just in the right time. from last few days i was looking for a process to package a javascript lib which i really wanted to have as a gem.

What's your challenges to keep third party lib up to date for their new releases? Do we have to manual download and copy to replace to files? Should the version of gems match with version of the library?

Awesome video! Thanks for sharing.
I am wondering, if we could use CDN instead of including js/css files. This way our gem will always be updated with the new release. Is that possible/viable to do so ?

You can although if you're using a lot of libraries it can be slower to load files from many domains. Usually you want to compile and minimize them in your application.js/css and then serve it up through a CDN like Cloudfront.

I have released my first gem on Google Material Design Lite(

Thank you so much for this wonderful tutorial.

what happens in production after you created a gem locally? would you have to host the gem somewhere?

Just Github or if you decide to release the gem publicly you can put it up in ruby gems so that you can use it like any other gem.

Released an Alpha version of Google's Material Design using SCSS:

Very much a work-in-progress, I basically extracted the code from a current project I'm building so I could use it in multiple projects at the same time and refine it. Will be several months before it's production-ready for the general public, even though I'm currently using it in production systems myself.

One thing I did have to do not covered in the video was update the <name_of_your_gem>.gemspec file and put in "real" text for some of the placeholders. When I ran "bundle" it actually threw a validation error, but was easy enough to fix.

I was pretty amazed at how easy that actually was and that it worked with about 15 min of work. Now I have 1 codebase to maintain interface code instead of multiple projects with copied/pasted code. Very cool.

Kyle Shevlin ·

Is there any way to avoid needing to require the asset files in the application.css or application.js files? I would like to create a gem that is implemented similar to Susy, where Susy is required in the application.rb file and then you use a Sass import where you'd like to import Susy into your stylesheets. Do you know what adjustments would need to be made in that case?

Kyle Shevlin ·

For the record, very thankful for your tutorial here. I've been meaning to turn this Sass library into a gem for a while and this is what I needed.

Valentin Krasontovitsch ·

I don't know why this seemed to work for everybody else, or maybe i'm really blind, but the only way to make this work for me was to copy the vendor folder into the new gem into an "app" directory. maybe this should have been obvious...

Norbert Forman ·

Massive thanks for this tutorial! I created my very first gem because of this, which can be seen here: Please check it out!

BadAllOff Shamil ·

@excid3:disqus 10x for vid.
And check it out, great js notification plugin wrapped in gem)

Awesome! Also hadn't heard of this library before, it looks slick!

I couldn't get this to work with a CSS-only gem :/ Any reason why my application.css would not be able to find my gem? Is it because it is a nested module (gem is called libloki-ui, not hosted on rubygems, its private)

EDIT: For those who don't know, you have to name your require statement the same as the name of the CSS/JS file, not as the gem itself.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 69,840+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.