How to use npm packages in rails?

Question

I'm trying to use the Ace editor in my Ruby on Rails app, with majority of the view composed as React components. I'm using the react-rails gem and I'm not using flux at all.

I found this react-ace package, but I have to use npm to install it. I've been able to get bower components working with bower-rails gem but never got npm packages to work. Is there a way to use this just through the asset pipeline (through vendor)?

By the way, I'm not using browserify or ES6 so I don't even have import. I've been doing everything through the asset pipeline so far.

Thanks!

Answer 1

To include npm packages in a rails project using the asset pipeline, do the following:

1. Initialise your package.json: npm init

2. Add node_modules to your asset path:

# config/application.rb
module YourApp
 class Application < Rails::Application
   config.assets.paths << Rails.root.join('node_modules')
 end
end

3. Make sure npm install runs on startup by adding an initializer:

# config/initializers/npm.rb
system 'npm install' if Rails.env.development? || Rails.env.test?

4. Install your package: npm install YourPackage

5. Link to your package from app/assets/javascripts/application.js:

//= require /Path/To/YourPackage

Answer 2

Rails 5.1 supports including npm packages using Yarn.

For example, let’s say we want to use the moment.js library. We need first of all install the library using Yarn:

yarn add moment

We can see that package.json was updated:

{
  "name": "yarn_test",
  "private": true,
  "dependencies": {
    "moment": "^2.18.1"
  }
}

And finally we need to include the new package to application.js:

//= require moment/moment

See Rails 5.1 and forward - Part 1: Yarn on Rails