Using npm packages in Rails

We load our gems from Rubygems, but a lot of you may still be placing your JavaScripts into vendor/assets/javascripts. Why not use npm? It’s actually pretty easy to set up Rails to use npm.

Use npm itself

The best way to load npm packages in Rails is to use npm as your pipeline itself.

Don’t want to switch away from the asset pipeline? That’s fine, read on for an alternative approach.

Alternative

Add node_modules to your gitignore

Because you don’t want to commit those, just like you don’t commit your gems.

echo '/node_modules' >> .gitignore

Create a package.json in your project

This is the npm equivalent of a Gemfile—it’s where your packages are stored.

npm init

Add node_modules to your asset path

This lets you use npm modules in your Sprockets assets. In config/application.rb:

module YourApp
  class Application < Rails::Application
    config.assets.paths << Rails.root.join('node_modules')

Run npm install on startup

Rails (or Bundler) prevents you from starting itself when you have gems that aren’t installed yet. To emulate that behavior for npm packages, do this in config/initializers/npm.rb:

system 'npm install' if Rails.env.development? || Rails.env.test?

Heroku: add Node.js support

If you’re deploying to Heroku, the default Ruby buildpack doesn’t include Node, which you need to use npm. Add both the Node.js and Ruby buildpacks:

heroku bulidpacks:add 'https://github.com/heroku/heroku-buildpack-nodejs.git'
heroku bulidpacks:add 'https://github.com/heroku/heroku-buildpack-ruby.git'

Adding JavaScript packgaes

You can only use node modules that come with a pre-built version in it. modernizr won’t work. You can try browserify-rails.

Use npm install

npm install --save --save-exact modernizr

Add to application.js

Then in your application.js, require it like so:

//= require onmount/onmount