26

The Javascript dependencies are growing in my Rails app and it's leading to some problems. For one, with so many it becomes difficult to track and update versions of different Javascript libraries. At first I tried turning them into gems, but then I have to manage those. Some are already gems (like backbone-rails) but I would like to have one consistent package manager.

So I'm looking into Bower, "a package manager for the web". Some blog posts from kaeff and from af83 have been helpful, but I still run into problems. I hope this question can lead to a variety of answers people can use to find the best solution for their projects.

I'd particularly like to see advice for managing assets through Bower in a Heroku deploy.

5 Answers 5

27

One way is using a version of Sprockets which allows your application.js to require packages defined by Bower. This feature was added in Sprockets 2.6, which Rails 3.x won't allow you to bundle due to a version restriction. To get that feature, you can bundle gem "sprockets", "2.2.2.backport1".

That will make Sprockets start looking for assets in vendor/assets/components too. The path is vendor/components because Bower packages could contain CSS or image assets too, not just Javascript. The way Sprockets knows what Javascript to include when you require the package is by reading the bower.json file for the main property, which says which files the pipeline should include. A gotcha here is that many Bower packages don't supply this property or supply main sources that assume RequireJS is available (e.g. d3). You can see what source main are defined with bower list --map.

When the main doesn't suit you, you can simply use Bower to manage a single remote JS file instead of a package. Josh Peek has a gist that demonstrates this. The latest version of Bower expects bower.json instead of component.json so I've updated the steps:

$ npm install -g bower
$ mkdir -p vendor/assets
$ cd vendor/assets/
$ curl https://raw.github.com/gist/3667224/component.json > bower.json
$ bower install

That particular bower.json loads jQuery. Then in your application.js you can simply //= require jquery and Sprockets will find it in your vendor/assets/components. To add new dependencies, just include them in your bower.json and run bower install again, for example:

{
  "dependencies": {
    "jquery": "http://code.jquery.com/jquery-1.8.1.js",
    "d3": "http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.js"
  }
}

If you want to manage your lib and vendor assets in one configuration file, you could use bower-rails, but there's not much point in using lib. That gem also provides some Rake tasks, but they don't do anything more than the basic Bower commands.

To my knowledge, there is no way yet to have Bower install as necessary during asset compilation. So if you're using a deploy environment like Heroku, you'll need to commit your vendor/assets/components directory and update it through the bower command.

It would be nice if could you require your whole Bower dependency set with one directive in application.js. A gist from kaeff illustrates how to create a require_bower_dependencies directive. There's no gem that does this for you yet. Until then, you have to declare each dependency in both bower.json and application.js.

7
  • As of 5/24/2013 sprockets bumped its version to 2.10.0, the release notes state they have added "Support for bower.json". I haven't found the documentation for it, but it's possible that there is now support for bower dependencies to be resolved during asset compilation.
    – Ryan Rauh
    Commented May 30, 2013 at 15:28
  • EDIT: I looked at the commit, it appears that it was a change to support the convention change in bower from component.json to bower.json
    – Ryan Rauh
    Commented May 30, 2013 at 15:38
  • 2
    "That will make Sprockets start looking for assets in vendor/assets/components too" - what about config.assets.paths << Rails.root.join("vendor", "assets", "components")? Surely you shouldn't need to backport for this, or am I missing something? Commented Jul 23, 2013 at 7:01
  • chris edwards is correct - if you need more details Commented Jul 30, 2013 at 3:38
  • "Sprockets knows what Javascript to include when you require the package is by reading the bower.json file for the main property..." What if you're trying to include an S/CSS or image component?
    – RobW
    Commented Aug 30, 2013 at 19:34
15

Checkout Rails Assets project. Usage example:

source 'http://rubygems.org'
source 'https://rails-assets.org'

# gem 'rails-assets-BOWER_PACKAGE_NAME'
gem 'rails-assets-jquery', '~> 1.10.2'
gem 'rails-assets-sly', '~> 1.1.0'
gem 'rails-assets-raphael', '~> 2.1.0'

UPD (26.01.2016)
Future of Rails-Assets project is on discussion. Please check the thread and make your own decision: use it or find a workaround.

1
  • This also avoids the nodejs/npm/bower dependencies at build time, which would be introduced in using bower directly. Commented May 28, 2015 at 13:17
8

Just wrote up a guide for doing Rails+Bower+Heroku. Hope that helps.

1
  • 1
    I'm not using Heroku, but I used your config/application.rb snippet because Sprockets was choking on the source map files pulled in by Bower. Worked a charm.
    – brendan
    Commented Nov 21, 2013 at 17:20
5

I've been working through this issue for the last few days, and have settled on the following process.

Use the bower-rails gem. It provides a number of nice rake tasks that help integrate the use of bower with a rails application and the asset pipeline. I prefer to stick with the bower.json configuration instead of the ruby-based DSL that bower-rails provides. I stick with the default bower location that stores assets in vendor/assets/bower_components. Make sure to add the following to your application.rb.

config.assets.paths <<  Rails.root.join("vendor","assets","bower_components")

Once you have packages added to your bower.json, then you run the following:

rake bower:install

to install your javascript packages. You then reference the javacript in your application.js and application.css files.

As @andrew-hacking noted above rails and bower do not play nicely with javascript packages that have css and images, specifically css that references images. Bower-rails aids in fixing this issue with the provided rake task:

rake bower:resolve 

It resolves relative asset paths in components by rewriting url references in component css files with the rails helper method to reference the asset in an asset pipeline friendly way. See BowerRails::Performer#resolve_asset_paths for more detail.

My preference is to check in all of the bower_components into our repository, so we run bower:install followed by bower:resolve. You then need to add the images referenced within the package to your config.assets.precompile list for your staging and production environments. For example here is the setup for adding the select2 javascript component to your rails project using bower and rails.

bower.json:

{
    "name": "Acme",
    "private": true,
    "dependencies": {
        "select2": "3.5.1"
    }
}

app/assets/javascripts/application.js.coffee:

#= require select2/select2

app/assets/stylesheets/application.css.sass

//= require select2/select2

config/environments/staging.rb and config/environments/production.rb:

config.assets.precompile += ["select2/*.png",
                            "select2/*.gif"]

It's not perfect, but it gives you the dependency management of your javascript components, and it's better then trying to figure out what gems you need to pull in to get the desired javascript component enabled for the asset pipeline.

1

In case anyone else thinks using bower in your rails project is a good idea, think again.

Bower packages are simply not made to integrate with rails or sprockets.

What this means:

  • they won't typically specify a manifest index.js for including your javascript via sprockets require directives.
  • You will have to analyse and ferret around in the bower package and work out exactly what you need to require and from where (your require paths get kind of long)
  • bower packages don't uniformly specify a main key, and even if they do the current sprockets/bower support seems to ignore them
  • additional assets like fonts, images and templates won't be included in your production asset compilation (Rails 4 only includes app/assets/xxx)
  • Using config.assets.precompile patterns to try and 'get around' the problem is coarse grained and will pick up lots of cruft in your bower components directories
  • bower packages won't use sprocket url path helpers so any references to images and fonts within CSS/SCCS wont have the correct asset path. Good luck with that.
  • you will have to resolve all of the issues in EVERY project where you use bower packages
  • bundle install no longer works for your projects dependencies and you have to use another package manager as well

In contrast asset gems are simple to create and provide a uniform abstraction for pulling assets into your project. You have a chance to modify the original files and use asset helpers so things work well with your rails projects. There is a decent blog on creating asset gems, as well as a general railscast on creating gems too.

IMO It would be better for the rails community to maintain up to date asset gems than every project having to deal with the issues of a bower package that was never designed to plug into the rails asset pipeline.

2
  • There are so many obscure pure-JavaScript libraries in the Bower registry that gemifying them all would be a huge amount of work; not to mention keeping the Gems up-to-date with bug fixes/features.
    – brendan
    Commented Nov 21, 2013 at 17:25
  • 1
    @brendan that may be the case, but using bower with the rails asset pipeline isn't a solution. You seem to think bower solves a problem for your rails app, well it doesn't. The only value bower provides to rails is running `git' to pull the source for you. For that, you can use git submodules instead to pull JS from their origin repositories and avoid bower altogether. Commented Nov 26, 2013 at 5:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.