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.
Related
I have a .js file named:
app/assets/javascripts/generics/directory/edit_person.js
that isn't included in the application.js because there's not\ require_tree and looking at the network tab in the browser, I've confirmed the edit_person.js is being served by itself.
The erb being rendered is named:
app/views/company_area/directory/edit_person.html.erb
I don't see any script tags in here referencing edit_person.js, is there some magic that Rails is doing?
You'd have to show us the relevant code.
A Rails application typically will serve JS in one of three circumstances:
A JS file is specified in your html. This includes application.js in the layout file.
A JS request was made and you are responding to that JS. Example: the JS file edit_person.js exists in the views folder corresponding to the controller action edit_person and a client makes a .js request to that action
Webpacker is configured to handle JS alongside the asset pipeline. [1]
If none of these apply to you, then you will not see your JS loading on the page. Knowing that, you need to check your layout, application.js, and controller actions (responses).
[1] Webpacker would not likely be serving these files due to their location in your dirs, but it was worth noting for the sake of accuracy.
is this an app you wrote? If not I would check any of the layout files (particularly: views/layouts/application.html.erb or views/layouts/persons.html.erb if available )
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.
I'm using Grails 3+. I have a folder in my app grails-app/assets/javascripts. Any js file I put in here loads automatically.
I have a GSP file with this tag <asset:javascript src="application.js" />. This tag loads a file that is in the grails-app/assets/javascripts. So basically the same file is being loaded twice.
My question is this. Why does Grails automatically load the JS files in the javascripts folder? How do I stop this from happening?
Your application.js probably includes the line
//= require_tree .
which includes all files in the current directory and subdirectories. Check out the asset-pipeline plugin docs for more info about the syntax for manifest files.
I'm using an external plugin in my rails project. I've placed the css for it inside vendor/assets/styles/pluginName, and the js in vendor/assets/scripts/pluginName. I've added vendor/assets to config.assets.path in application.rb, and I'm requireing the stylesheet and js file for the plugin in application.js and application.css
My question is, vendor/assets/styles/pluginName/styles.css refers to an image foo.png which is located at vendor/assets/styles/pluginName/foo.png. When the assets are pre-compiled, does foo.png remain at the same path, or do i need to do something so the paths don't break?
Reason for asking: Currently, everything works on localhost, but when i deploy and recompile the assets, the plugin's js seems to work, but the images are missing.
There is a similar question: Rails 4: Where to put JavaScript/CSS plugins. But none of the answers actually answer my question.
This plugin is third-party, so I'd like to put it somewhere in vendor directory (and not in the assets directory).
Also I think it's better to keep all the plugin files in one directory, so I don't want to spread js, css files and images into different directories.
So is there any nice way of dealing with vendor js plugins in Rails 4?
Add the third party plugin as:-
Approach 1:-
Consider the example, to add gem 'bootstrap-sass', do like that:-
In Gemfile:-
gem 'bootstrap-sass', '3.3.1', :path => 'vendor/bootstrap-sass-3.3.1'
Puts the whole plugin of bootstrap in vendor/ folder so the directory structure will looks like
vendor/bootstrap-sass-3.3.1/assets/
vendor/bootstrap-sass-3.3.1/lib/
vendor/bootstrap-sass-3.3.1/tasks/
vendor/bootstrap-sass-3.3.1/ #other directory and files
Approach 2:-
If only third party js files are included, then put js files in vendor/assets/javascripts/ and require it in application.js as :-
//= require file_name_without_js_extension
Example:-
//= require jwplayer
For css, put css files in vendor/assets/stylesheets/ and require it in application.css as :-
*= require file_name_without_css_extension