Ask A Question

Notifications

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](https://github.com/TangRufu...

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

Reply

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

Reply

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’.

Reply

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.

Reply
Kevin Sylvestre Kevin Sylvestre

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

Reply
Cullen Murphy Cullen Murphy

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

Reply

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.

Reply

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?

Reply

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 ?

Reply

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.

Reply

I have released my first gem on Google Material Design Lite(https://github.com/varmad/g...

Thank you so much for this wonderful tutorial.

Reply

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

Reply

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.

Reply

Released an Alpha version of Google's Material Design using SCSS: https://github.com/dlegr250...

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.

Reply
Kyle Shevlin 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?

Reply
Kyle Shevlin 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. https://rubygems.org/gems/s...

Reply
Valentin Krasontovitsch 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...

Reply
Norbert Forman Norbert Forman

Massive thanks for this tutorial! I created my very first gem because of this, which can be seen here: https://rubygems.org/gems/p.... Please check it out!

Reply
Reply

Boss. 👊

Reply
BadAllOff Shamil BadAllOff Shamil

@excid3:disqus 10x for vid.
And check it out, great js notification plugin wrapped in gem)
https://rubygems.org/gems/i...
https://github.com/BadAllOf...

Reply

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

Reply

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.

Reply
Join the discussion
Create an account Log in

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

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

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