I cannot get any javascript to run when my Ruby on Rails project is in deployment mode. I have a js at vendor/assets/javascript/theme/index-slider.js. It has an alert in this file to test that the javascript is working:
alert('TestTestTest');
When I run the project in the development mode, all the javascript runs properly. Additionally, if I add <script>alert("Testme");</script> to my index.html.erb file, that javascript runs in production mode.
I have been running rake assets:precompile and RAILS_ENV=production rake assets:precompile when making changes as well as restarting the server
How can I get Javascript to run in Production mode? (Also I am rather new to Ruby on Rails so I am not sure which files/information I should include to be helpful.) Thanks.
application.js
// 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 vendor/assets/javascripts of plugins, if any, 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/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap/bootstrap
//= require theme/bootstrap.min
//= require theme/flexslider
//= require theme/index-slider
//= require theme/jquery.countdown.min
//= require theme/jquery.isotope.min
//= require theme/theme
//= require_tree .
I've found that the issue lies in the application.js file. I've added bootstrap into my project by hand as well as a boostrap theme. I've found that for whatever reason, the //= require bootstrap/bootstrap line should not be included above the theme I have chosen.
You need to compile assets for your production as well
rake assets:precompile RAILS_ENV=production
Related
I am struggling.
I have rails 5 app with a series of js files in my app/assets/javascripts folder. The js in those files works just fine in the development environment, but when I publish on heroku, it stops working.
I can see from the chrome inspector, that the application.js file that is visible from the network tab shows the content of the js files in my app. That js just doesnt seem to do anything in production. No console errors appear from the chrome console inpsector.
I can see from this post that there are a series of things to try. I've tried all of them. I've even made a completely new app and added the js files on at a time to see if there is a tipping point where something is required in a different order to something else (mostly guessing) - but that does nothing to fix the problem.
I can see from this article that one suggestion is to:
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
and then try:
rake assets:clean assets:precompile
I've tried each of these suggestions and still can't find the problem.
If there were an error in the way I've written the js, I would expect that to be exposed in both my development and production environment console inspectors in chrome. There are no errors showing in either environment.
If there were a problem with the production environment reading the js file, I'm confused about why I can word search for the words used in the js file in the file I can open from the network tab and see the correct text.
How do I go about solving this problem?
My relevant files are:
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
// require underscore
// require gmaps/google
//= require markerclusterer
//= require cocoon
//= require cable
//= require_tree .
config/initializers/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
config/production.rb
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
The relevant file that is not working in the production environment is saved in app/assets/javscripts/stance/commercial.js (so it should be identified in application.js by //= require_tree.
That file has:
jQuery(document).ready(function() {
jQuery('[name="organisation[commercial_attributes][standard_financial_split]"]').on('click', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#commercial_standard_financial_split_content').removeClass('hidden');
} else {
jQuery('#commercial_standard_financial_split_content').removeClass('hidden').addClass('hidden');
}
});
});
Can anyone help with a process for getting js to work in the production environment?
I am out of suggestions for things to try and this isn't the sort of thing that the tutorials, code schools (I am a student in code school, go rails, udemy and have a million books), but can't find an reference point from which to start in solving this problem.
For me, the solution was to remove the javascript include tag from the header of my application.html.erb to beneath the body. That fixed the problem with the js file I referenced in my question.
However, this has now broken my google maps javascript, so I'm not sure that this is actually a good solution.
Before the deployment I had the following error in the browser console:
ReferenceError: require is not defined npm.self-...js:2:0
Despite this, javascript works perfect on my local server. When I deploy my application on heroku it doesn't, but css does, so I'm not sure that a problem caused by asset pipeline. I have
group :production do
gem 'pg'
gem 'rails_12factor'
end
in my Gemfile. I tried to precompile assets locally and even via "heroku run" command, but it didn't change anything. Here's my application.js:
// 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_tree .
//= require moment
//= require bootstrap-datetimepicker
$(function() {
$("#datetimepicker").datetimepicker({
locale: "en",
format: "lll"
});
});
$(function() {
$("#events").on("click", ".pager a", function() {
$.getScript(this.href);
return false;
});
});
And npm.js:
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
If you'll ask I might share the github link. Thank you!
Sorry, don't have enough reputation to comment, or else would have.
The require() function is not built into the browser. I suggest try removing
//= require_tree .
& manually adding your javascript files(only to test, you don't get the error) like this
//= require desired_js_file
//= require_tree . pre-compiles everything in asset/javascript's root and serves to http request. And when the browser comes across a js file with require() function it probably gives you the error.
Hope this helped!
I'm working on a website that uses HTML, CSS, and JavaScript with jQuery plugins. In order to make the website more dynamic, I shifted my code to Ruby on Rails. The HTML and CSS are fine, but some of the jQuery plugins that I had working before aren't functioning anymore.
I tried multiple ways to fix this. I first added the javascript files into app/assets/javascripts and then added //= require pluginfilename in application.js and then <%= javascript_include_tag name..... %> but that didn't work.
Is there something that I'm missing or doing wrong? I'm fairly new to Rails. This is version 4.2.3 btw.
Edit: this is my application.js file
// 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 bootstrap.min
//= require turbolinks
//= require countdown
//= require grid
//= require custom
//= require script
//= require_tree .
First thing I would do would be to try and find a version of the plugin that's distributed via CDN, then including it via <%= javascript_include_tag link %>.
Barring that...
Did you do a //= require pluginfilename without the extension? Can you paste in your application.js file so we can take a look?
Also, what errors are you getting your JS console? Are you ensuring that the plugin is being loaded before it's being used? (Load order in the application.js file matters.)
You can find a bridge between Bower and Rails with Rails-Assets.org. I've used this for several projects and it works nicely. If your plugins are using bower, they should exist on Rails-Assets.org
I have a small JS file (common.js) containing one function. I have the following lines in application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.readyselector
//= require common
//= require_tree .
When I store it in
app/assets/javascripts
or
vendor/assets/javascripts
the file is loaded properly, but when I move it to
lib/assets/javascripts
it stops working and I get the error:
Sprockets::FileNotFound
couldn't find file 'common'
(in C:/Sites/rails_studio/beatjoe/app/assets/javascripts/application.js:21)
All this eventhough my Rails.application.config.assets.paths is:
- C:/Sites/rails_studio/myappname/app/assets/images
- C:/Sites/rails_studio/myappname/app/assets/javascripts
- C:/Sites/rails_studio/myappname/app/assets/stylesheets
- C:/Sites/rails_studio/myappname/lib/assets/javascripts
- C:/Sites/rails_studio/myappname/vendor/assets/fonts
- C:/Sites/rails_studio/myappname/vendor/assets/images
- C:/Sites/rails_studio/myappname/vendor/assets/javascripts
- C:/Sites/rails_studio/myappname/vendor/assets/stylesheets
- C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/turbolinks-2.3.0/lib/assets/javascripts
- C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/jquery-rails-3.1.2/vendor/assets/javascripts
- C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/coffee-rails-4.0.1/lib/assets/javascripts
According to the documentation, not only should common.js be included due to
//= require common
but also be caught by
//= require_tree .
What am I missing?
I was able to reproduce the Sprockets::FileNotFound error by creating the lib/assets/javascript directory while the local server was running. It appears you need to restart the server to pick up directory changes.
Now that your server has since been restarted, you should be able to add files to the directory without restarting your server.
I am trying hard to have one of my javascript file load/work with a Rails4 app.
The file is users.js.coffee . This is a catch all javascript file that I want loaded for all pages (not necessarily just for users controller)
If I try to load by localhost:3000/assets/users.js I can see the compiled JS file. However using cmd+o on chrome doesnt load the file and also the events are not fired so I know its not working(and loading)
Also tried running bundle exec rake assets:clean assets:precompile
I do not see any 500 or 400 or js errors in console. The simplest of users.js.coffee doesnt work as well
$(document).ready ->
alert('hello')
Some configs:
applcations.js
//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap-slider
//= require users
//= require_tree .
development.rb
config.assets.initialize_on_precompile = false
config.serve_static_assets = false
production.rb
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = true
# Compress JavaScripts and CSS
config.assets.compress = true
config.assets.compile = false
# Generate digests for assets URLs
config.assets.digest = true
config.assets.debug=true
Also the users.js.coffee was working fine before I started playing around with getting bootstrap using bootstrap-sass etc (on an tangent,eventually ended up loading bootstrap from hosted CDNs in application.haml, not sure if it should interfere with how js files are loaded/works)
Any pointers to debug this is greatly appreciated. Already spent few hours and Asset Pipeline gets me everytime
Thanks
P.S:
I am deploying to heroku (however this fails in both dev and heroku so hopefully fixing in dev should be enough)
Update application.js content by moving //= require users after all other libraries that your application's javascripts depend on but before the require_tree .:
//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap-slider
//= require users
//= require_tree .
The order of requiring javascripts is important here. If your file is users.js.coffee then you need jQuery for coffeescript so jQuery must be required before users.