This is my app on Heroku: http://mighty-brushlands-6367.herokuapp.com/ and this is how it SHOULD look, as it does locally:
Well I did some googling. I check this solution: JQuery events are not working on heroku in production but work in development and others.
I went ahead to run heroku run rake assets:precompile but still can't get the effects to kick in on Heroku. This is how my application.js looks like:
// 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 turbolinks
//= require_tree .
//= require bootstrap
//= require textEffect
I need some guidance. I'm a hungry-for-knowledge newbie.
Your Heroku app is getting a 404 error on the application.js & application.css files which leads me to believe it is not getting pushed to Heroku in the first place.
Try running rake assets:precompile in development, then the usual steps git add . , then git commit, and then git push.
The solution was to add
group :production, :staging do
gem 'rails_12factor'
end
To the Gemfile and commit again to Heroku
Related
I previously found help here for how to hide and show form fields based on whether a radio button in the same form is set to true or false.
This works fine in my development environment.
I just pushed to heroku and have checked the production version. Nothing happens when I select the true button in the form field that is supposed to reveal the hidden fields.
Others who have had similar issues describe this as a problem attributable to not precompiling assets.
Here is my setup.
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_tree .
I expect that require_tree will pick up all of the files saved in my app/javascripts directory.
The js that solved the initial problem I posted about in my linked post is saved in app/javascripts/stances/commercial.js.
production.js
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
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 )
When I push to heroku, I can see from the log that the precompile does happen:
Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: Asset precompilation completed (3.51s)
The heroku docs say that I shouldn't need to manually precompile assets because it's done on deployment. That makes sense because the above log shows that it is happening. Is there something else I need to be doing to make heroku pick up my js files in production?
This post suggests that Heroku doesnt precompile if there is a public/assets/manifest.yml file in the repo. There is no such file in my application, so i'm expecting that heroku is compiling my assets. It looks from the log (copied above) that it has - so I'm confused about whether I'm supposed to precompile assets before pushing to production or rely on the process that Heroku is supposed to be doing.
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.
in my ror application i've a jquery error during the execution. On the Google Chrome Application appear this message
Uncaught ReferenceError: jQuery is not defined
this is 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 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 foundation
//= require turbolinks
//= require_tree .
$(function(){
$(document).foundation('alert');
});
In the gemfile is present the jquery-rails gem.
I really don't know where crush my head. All the help is appreciated
remove Gemfile.lock
do
$bundle install
now check if jQuery works
Simply followed instructions from http://guides.spreecommerce.com/developer/asset.html but it just doesn't work. New js files are included and loaded, but if I create file with the same name say product.js.coffee original file is loaded anyway. Any suggestions?
All.js
//= require jquery
//= require jquery_ujs
//= require spree/frontend
//= require_tree .
I've been tearing my hair out over this problem all morning.
In the end what worked for me is to specify every single file I wanted to overwrite in /app/assets/javascripts/spree/frontend/all.js.
E.g., if you want to overwrite cart.js.coffee and checkout/address.js.coffee, your all.js should look like:
//= require jquery
//= require jquery_ujs
//
//= require spree/frontend
//= require spree/frontend/cart
//= require spree/frontend/checkout/address
//
//= require_tree .
Don't ask me why that's necessary. My understanding is that //= require_tree . should do that automatically, but it my case, well, it wasn't.
After creating an all.js file and redundantly specifying each file, this finally worked for me. But I'm a spree/rails noob, so there's quite probably a better solution.
Edit:
Actually, to get this working I had to put the above in /vendor/assets/javascripts/spree/frontend/all.js and remove /app/assets/javascripts/spree/frontend/all.js. Still confused why this is necessary and why require_tree doesn't pick these up automatically, but happy to finally get it working.
Backporting this patch for Solidus 2.1.0 solved my issue of replacing/overwriting JS assets [1].
The problem appeared to be that there was an issue with Sprockets where using require_tree or relative require prevented JS assets in the pipeline from being overridden.
In summary
Create a new file under your project's vendor/assets with the same filename as the JS file you're going to replace in Solidus. For example, to overwrite the file solidus_backend/app/assets/javascripts/spree/backend/flash.coffee, create a replacement file in your project at your_project/{app,vendor}/assets/javascripts/spree/backend/flash.coffee. [2]
Create the files your_project/{app,vendor}/assets/javascripts/spree/backend.js and your_project/{app,vendor}/assets/javascripts/spree/backend/templates/index.js in your project.
Copy the contents for the backend.js and index.js files from solidusio/solidus#1613 into your project.
Remove any requires for files that do not exist in your Solidus version, and keep any custom requires if you already had backend.js and index.js defined. [3]
Footnotes
Includes .js, .coffee, .hbs, and any other files that compile to JavaScript during the asset pipeline compilation.
Either directory between {app,vendor}/assets in your project will work since they should both be in the asset pipeline loadpath. It's a matter of preference how you want to organise Solidus extensions and overrides.
I had to remove spree/backend/images/upload from backend.js
and spree/backend/templates/products/upload_progress from index.js since I was using an older version of Solidus and those files didn't exist yet, so I would get an FileNotFound error from Sprockets.
when using the bootstrap-sass gem i have loaded my css files properly, however have been receiving an error when i try loading the javascript files. I have followed the procedure of loading javascript from https://github.com/twbs/bootstrap-sass however when I view my webpage on localhost I receive the error "couldn't find file 'bootstrap'"
This is what my application.js file looks like - Any help would be much appreciated!
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 turbolinks
// Loads all Bootstrap javascripts
//= require bootstrap
//= require_tree .
From the Rails 4 the :assets group isn't used anymore, please remove the group from Gemfile:
Rails 4.0 removed the assets group from Gemfile. You'd need to remove that line from your Gemfile when upgrading. You should also update your application file (in config/application.rb):
Bundler.require(:default, Rails.env)
I got it to work by removing gem 'bootstrap-sass', '~> 3.0.3.0' out of the assets group in gemfile! YAY
Did you bundle install and make sure you are loading application.js (from the assets pipeline).