Using javascript plugins in Ruby on Rails application

Question

I'm trying to use Uppy plugin, a plugin for uploading images, in a Ruby on Rails application.

The basic functionality works through CDN bundles, and I have no problem with that, this works fine. My problem happens when I need to use additional plugins by Uppy.

Importing those is done through using, require. For example:

const AwsS3 = require('@uppy/aws-s3')
const ms = require('ms')

How can I include those in a Rails project?

Answers to this question suggest using npm init in a rails project, but this seems very radical. Is there an easier way to include a javascript library such as the one mentioned in a Rails project?

Are you using the older assets pipeline (js files are in app/assets/javascripts) or the newer rails-6 webpack pipeline (files in app/javascript/packs)? — Jonathan Bennett
– Jonathan Bennett, Commented Aug 13, 2019 at 12:49

Jonathan Bennett · Accepted Answer · 2019-08-13 13:50:53Z

1

If you want to mimic the behaviour of the CDN, you can add javascript files to a vendor/assets/javascripts folder. You can then require the files manually in application.js:

//= require uppy-1.2.3.min.js
//= require uppy-aws.js
//= require uppy-stuff.js

This avoids NPM entirely.

If you want to manage things via NPM, you would want to:

run npm init in the root of the project
add node_modules to your .git_ignore
run npm install --save PACKAGE_NAME for all of your needed packages
add Rails.application.config.assets.paths << Rails.root.join('node_modules') to your application config, most likely in app/config/initializers/assets.rb
add the full path of required packages to application.js,ie //= require @uppy/core/src/index.js

This only work if the packages have a pre-built version packaged with the release. This is typically in a dist folder instead of a src folder

answered Aug 13, 2019 at 13:50

Jonathan Bennett

1,0657 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

mrateb Over a year ago

Ok, so excuse the question if it sound stupid, but I know next to nothing about javascript. So the first option, would entall downloading the files, adding them to my folders manually and then including them in the asset pipeline?

Jonathan Bennett Over a year ago

That is correct. For Uppy specifically you can download the full package here: transloadit.edgly.net/releases/uppy/v1.3.0/uppy.min.js. If you put that in vendor/assets/javascipts/uppy.js you can add it to application.js with //= require uppy.js. There are downsides to this such as larger file sizes that you can solve with more complex solutions like webpacker, but this will get you started.

Jonathan Bennett Over a year ago

Also, setting up a full featured, "modern" javascript environment can be very complicated. It absolutely does not sound stupid to have questions about how to go about it.

mrateb Over a year ago

Thanks a lot Jonathan, but one more question if I may. Any ideas if this link that you gave here has uppy-aws, and if not where can I download it separately? And thanks a lot again for the answer, ill try it and tell you :)

Jonathan Bennett Over a year ago

It is included. You can access it via Uppy.AwsS3

|

Collectives™ on Stack Overflow

Using javascript plugins in Ruby on Rails application

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related