0

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?

mrateb
  • 2,317
  • 5
  • 27
  • 56

1 Answers1

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:

  1. run npm init in the root of the project
  2. add node_modules to your .git_ignore
  3. run npm install --save PACKAGE_NAME for all of your needed packages
  4. add Rails.application.config.assets.paths << Rails.root.join('node_modules') to your application config, most likely in app/config/initializers/assets.rb
  5. 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

Jonathan Bennett
  • 1,055
  • 7
  • 14
  • 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? – mrateb Aug 13 '19 at 13:55
  • That is correct. For Uppy specifically you can download the full package here: https://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 Aug 13 '19 at 14:32
  • 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. – Jonathan Bennett Aug 13 '19 at 14:34
  • 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 :) – mrateb Aug 13 '19 at 15:10
  • It is included. You can access it via `Uppy.AwsS3` – Jonathan Bennett Aug 13 '19 at 15:48
  • Ok when I try to use smt such as const AwsS3 = require('@uppy/aws-s3') I'm getting an error require not defined. Is there any alternative to this? I mean I'm using require in application.js well and good, but how can I set the variable AwsS3 – mrateb Aug 19 '19 at 05:38
  • In your assets/javascript/application.js file, doing `//= require 'whatever'` is essentially copy/pasting the file inline. This is effectively the same as using a CDN, at which point you can access it via `Uppy.AwsS3`, just with the benefits of keeping your code under your control – Jonathan Bennett Aug 20 '19 at 08:18
  • Thanks a lot Jonathan! :) – mrateb Aug 21 '19 at 04:25