Develop Reference

Can't make JS plugins work with Rails 5.1 and Yarn

I'm trying to install fullpage.js plugin in a Rails 5.1 app following this guide's advice but haven't been successful. The steps I've followed are:
Entered yarn add fullpage.js in the command line
Checked that the plugin is listed in package.json (the plugin is indeed listed under dependencies as "fullpage.js": "^2.9.4")
Declare the plugin in the JS manifest at app/assets/javascripts/application.js using //= require fullpage
Unfortunately I get an exception when loading the webpage (
couldn't find file 'fullpage' with type 'application/javascript'
)
I've tried using //= require fullpage/fullpage and //= require fullpage.js (this last one as I noticed no other dependencies are listed in package.json with their JS extension.
None of those variations have worked.
Could you help me understand what I'm doing wrong?

I found what was the problem.
It was simply the way I was referencing the asset files in the manifests. To do it correctly I had to go into the node_modules folder (in the root directory) find the folder where fullpage.js was installed and check inside in which folder the js and css file where exactly located.
In this case they happened to be located in node_modules/fullpage.js/dist/ so I had to reference them in the manifest as following:
#the js file
//= require fullpage.js/dist/jquery.fullpage
#the css file
*= require fullpage.js/dist/jquery.fullpage
Note that the name of the file I was referencing were "jquery.fullpage.js" and "jquery.fullpage.css" so I'm just leaving the extensions out as usual.

Why do we have to require the JS files inside application.js in rails?

I am new to rails so pardon the question. Now, why do we have to require the JS files inside the application.js file or the css files inside the application.css file? As far as I have read that when we launch the server rails loads all the javascript and css files from the directory into one file, so if it already loads all the files from the directory why there is a need to write inside the application.js or application.css file?
For example:
//= require abc
//= require xyz
If I already have abc.js and xyz.js file, why should I require them inside application.js file?

You are misunderstanding the concept. Let me explain the process. As you know, when you launch the server, rails first precompiles the files inside the assets folder with the help of sprockets-rails gem, but it does so by following the directives specified inside the manifest files i.e application.js and application.css.
Now inside the application.js you have "//= require_tree .", this tells sprockets to load all the files inside the javascript directory, process them, compress and combine them to produce one master Javascript file, this helps to reduce the page load time of the website. Now,here is your question, since "//= require_tree ." directive already takes all the javascript files present inside the javascript directory, why there is a need to specify the javascript files inside application.js? The answer is "Order".
"//= require_tree ." it loads, compress and combine all the JS files in an unspecified order or random order. Now, if you are a web developer or have started now, you might know or will come to know that many times you have to load JS files in some specific order, otherwise there may arise some conflict when we implement them, they might not work as we want them to.
One such famous combo is jquery and bootstrap. In order to use bootstrap JS part it needs jQuery, so you have to initialise jquery first and then bootstrap. Precisely for this reason in rails you require the files inside application.js specifying the order in which you want the sprockets to load,compress and combine into one master JS file. As sprockets processess the directives from top to bottom in the order specified in the application.js file, it becomes important to require the files in application.js file. If you have 2 javascript or css files which in no way connflict with each other then, there is no need for you to require the files inside application.js or application.css file and they will still work fine.
For example:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require_tree .
Above, the sprockets-rails gem will first load jquery.js file then jquery_ujs.js file and then bootstrap.min.js file in that order. There is no need to add the extension as it assumes that all the files will be of type javascript only.
The above whole explanation also applies for the precompilation of css files specified inside application.css.
For more information, I advise you to visit http://guides.rubyonrails.org/asset_pipeline.html and read about rails asset pipeline.

How are Sprockets directives read in manifest file when using Rails?

New to Rails so bear with me...I was looking at a manifest file (application.js) today while researching the asset pipeline and was curious how the directives such as //= require jquery are being read. Is this something Sprockets is doing in the background? How? Why must the directive be commented out first, and the equal sign added? If I uncomment the directives and load the application.js file in my broswer, I no longer see the jquery library contents. Just curious how this is working in the background.
Also, when I add my own custom css stylesheet, do I add a require directive in the application.css manifest file, or do I add the stylesheet link such as <link rel="stylesheet" type="text/css" href="mystyle.css">? Or do I do both? I'm assuming I shouldn't add css directly inside of the manifest file...
Thanks!

Dont know how much you know, so will try to explain in details.
Rails stores our assets (like images, css, js files) in separate places, so its all in order and better for us - devs, to use. So thats called Assed Pipeline. When Rails loads those assets, say, css files, it creates one big file from all our app files, to avoid multiple calls. And Manifest is like a map or rules for Rails which files to include in that big css file and this *= is whats telling Rails what exactly to include (I consider it as a Rails syntax). So when you have something like this:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
require_tree . tells Rails to grab all files from the javascripts folder, while //= require jqueryand others directs Rails to special cases - assets, usually used by your gems (those files you never keep in your javascripts/stylesheets folders, so //= require_tree . cant see them).
When you add your on css file, you just add it in the stylesheets folder and require_tree informs Rails to include it in the big picture. But Rails has a nice feature - scaffolding. You scaffold your object with command rails g scaffold User and Rails creates everything for you - views, controller, model, tests (and who knows what else :) ). So in this case you don't even need to create your css file, just insert css rules into it and Rails will find it due require_tree .
A bit different story with sass files:
If you want to use multiple Sass files, you should generally use the
Sass #import rule instead of these Sprockets directives. When using
Sprockets directives, Sass files exist within their own scope, making
variables or mixins only available within the document they were
defined in.
So if you will be using Bootstrap (probably will), this is a important to know as well.
Hope this helps

How? Why must the directive be commented out first
Because this is sprockets directive. It is executed well before any js/coffee in that file gets the chance to run. And css is not "runnable" code at all. How do you make this kind of code not produce any errors? You comment it.
... and the equal sign added?
To tell these special directives apart from other, "regular" comments, which may be in that file.
I'm assuming I shouldn't add css directly inside of the manifest file...
Why not, go ahead. Although you may want to put any custom code in separate files for reasons of code organization. But technically, there's no problem here.
Also, when I add my own custom css stylesheet, do I add a require directive in the application.css manifest file
No need, require_tree . will find and include your file.
or do I add the stylesheet link such as <link rel="stylesheet"type="text/css" href="mystyle.css">?
Nope, don't do that.

vendor javascript files missing from rails project

I am using rails v4.2.4. I have tried creating a test app using the command
rails new app
Even though I can see the jquery references in the Gemfile (also present in application.js), and I have ran bundle install as well, however, the vendor/assets/javascript directoy is empty and does not include the JS files. I have already ran bundle install as well. Am I supposed to add them by hand or did I miss a command to pull those files for me in the Rails project?
application.js file in app/assets/javascripts
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

jQuery.js is inside vendor/assets/javascripts directory of respective gem. jquery-rails is a so called Rails Engine, which is a "mini-app" by itself.
Engines can be considered miniature applications that provide functionality to their host applications. A Rails application is actually just a "supercharged" engine, with the Rails::Application class inheriting a lot of its behavior from Rails::Engine.
How to find jquery-rails home dir
Issue command (to find out where jquery-rails is located):
gem which jquery-rails
#=> /home/dimitri/.rvm/gems/ruby-2.1.5/gems/jquery-rails-4.0.5/lib/jquery-rails.rb
jquery-rails's home dir, based on output, is:
/home/dimitri/.rvm/gems/ruby-2.1.5/gems/jquery-rails-4.0.5
Your versions and path may be different.

How to add a js file to a rails project

I'm trying to add a js file which is part of a purchased theme to my rails project.
In my assets.rb file I have
Rails.application.config.assets.precompile += %w(mvpready-core.js)
In my application.js I have
// This is a manifest file that'll be compiled into application.
//= require mvpready-core
//= require_tree .
At the end of my user.html.erb I have
<%= javascript_include_tag "application" %>
But when I load the page console gives me the error
ReferenceError: mvpready_core is not defined
What am I doing wrong and how can I debug this?

I dont think you need to tell anything to the assets.rb file.
The proper way of integrating a purchased theme is to put the required assets files in the vendor folder of your rails project directory. The vendor folder is specially for the third party plugins such as bootstrap. So what you need to do is as follows:
STEP 1:
Copy and paste the necessary JS and CSS files into the particular folders of the assets inside vendor folder.
STEP 2:
Require those files in to the project's manifest file i.e application.js and application.css files.
You can find manifest files here:
app -> assets -> javascripts -> application.js and app -> assets -> stylesheets -> application.css

Let me help you understand a little bit more. Ruby on Rails has some magick that goes on in the background where you do not need to add anything to
assets.rb
once you have setup your new project all you need to do is put the javascript file into:
/app/assets/javascripts/mvpread-core.js
When you start the rails server it will autoload anything you have in following directories:
/app/assets/javascripts/mvpread-core.js
/app/assets/images/mvpread-core.png
/app/assets/stylesheets/mvpread-core.css
Now if the javascript has path's in it linking to images, other javascripts, and other stylesheets you will need to search through the source code and make sure that it is looking for the file in this url path structure:
/assets{javascripts|images|stylesheets}
Also as #Taylor Galeser asked did you put the file in /app/assets/javascripts ?
This is all a very overly simplistic explanation on what Ruby on Rails does automatically for you but it should help you get what is going on behind the scenes better.