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!

you can have a look at the browserify-rails gem – VonD Apr 13 '16 at 16:02 — VonD, Apr 13 '16 at 16:02

score 24 · Answer 1 · edited Aug 22 '20 at 09:26

24

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

Initialise your package.json: npm init
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

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?

Install your package: npm install YourPackage
Link to your package from app/assets/javascripts/application.js:

//= require /Path/To/YourPackage

edited Aug 22 '20 at 09:26

CaTs

1,303
10
16

answered Aug 07 '18 at 00:31

Gerard Simpson

2,026
2
30
45

thank @Gerard but i have no npm.rb inside that dir do we need create it manualy? – Nerius Jok Jan 02 '19 at 14:04
An important thing here I would like to add is: After adding `node_modules` to `config.assets.paths` in `/app/assets/javascripts/application.js` you need to include files in correct manner. For e.g. for including riotjs in my Rails app I attempted `//=require riot` but I encountered error `ActionView::Template::Error couldn't find file 'riot' in paths registered` which included `node_modules` folder. Then I searched on how to make it work and ended up at following post https://stackoverflow.com/a/47808273/936494 based on which I changed my added entry to `//= require riot/riot` and it worked. – Jignesh Gohel Oct 19 '19 at 12:18
@NeriusJok Yes you do – Gerard Simpson Dec 20 '19 at 10:07
@GerardSimpson, the 3rd step is for the dev and test environment, why we're skipping prod env here? Will they installed automatically during the prod build? – Art713 Dec 27 '19 at 10:20
2

@Art713 production builds should be deterministic and reproducible. Using npm install will fetch JS assets from the network, which could lead to breakages if the package is unavailable or has been updated. For production you should bundle the JS assets in your deployment. – E Rullmann Dec 27 '19 at 23:14
@GerardSimpson Very helpful :D I wanted to add you can check your asset paths by running `Rails.application.config.assets.paths` in rails console. – CaTs Aug 21 '20 at 03:45

score 3 · Answer 2 · answered Sep 10 '21 at 22:15

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

Anthony E · Answer 3 · 2016-04-13T16:23:52.207

The short answer is that the ACE editor was built to run in Node.js not Rails, so there's no simple way to do this. Remember that most npm packages are intended to be used as server-side javascript with running on the Node.js environment and wont be runnable directly within Ruby. I believe th Ace Editor requires a Node.js backend and I doubt it would be trivial to have it run in a Rails backend.

Of course, any javascript which runs in the browser can be integrated the Rails asset pipeline. Towards this end I recommend checking out Bower, which is the most commonly used package management system (http://bower.io). You can install directly within your Rails application, though I'd recommend checking out Bower rails for better integration with Rails conventions and the asset pipeline https://github.com/rharriso/bower-rails.

If you want to try porting platform-agnostic javascript to the browser you can check out browserify, which simply links javascript files using the CommonJS require format that Node.js uses. It won't magically make server-side javascript frameworks like Express or the ACE Editor work solely in the browser, however.

How to use npm packages in rails?

3 Answers3

Linked