Javascript not executing when deployed to heroku, but works fine locally - javascript

This question seems to have been asked 30 different ways, and I've attempted all of the solves with no luck.
Rails 4 app that runs fine locally, but when deployed to heroku (Cedar), the javascript is not executing. Process I'm going through:
1) RAILS_ENV=production bundle exec rake assets:precompile
2) git add, then commit
3) git push heroku master
I've also tried clobbering the assets on both heroku and my local machine.
Production.rb
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = true
config.assets.compress = true
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
config.assets.digest = true
config.assets.precompile += %w( '.woff', '.eot', '.svg', '.ttf' )
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
application.rb
config.assets.version = '4.0'
config.assets.enabled = true
config.before_configuration do
env_file = File.join(Rails.root, 'config', 'local_env.yml')
YAML.load(File.open(env_file)).each do |key, value|
ENV[key.to_s] = value
end if File.exists?(env_file)
end
config.action_mailer.delivery_method = :postmark
config.action_mailer.postmark_settings = { :api_key => ENV['POSTMARK_API_KEY']}
config.assets.initialize_on_precompile = false
config.middleware.use Rack::Attack
I've also tried adding config.assets.compile = true
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require masonry/jquery.masonry
//= require masonry/jquery.imagesloaded.min
//= require masonry/jquery.infinitescroll.min
//= require masonry/modernizr-transitions
//= require underscore
//= require gmaps/google
//= require_tree .
When I run the app on heroku, I can see the javascript in through the developer tools:
..but the js is not executing. Where am I going wrong here?

Try moving //=require Turbolinks to the very bottom of your application.js and see if that doesn't help. Also, you can try turning off turbolinks. Turbolinks is cool, but doesn't always play nice with others.
Hope this helps!

Related

Rails 5: JS files not loading in Production

I'm using Rails 5 and Ruby 2.5, and deploying to Amazon Elastic Beanstalk.
All the stylesheets and CSS files are loading correctly in Production, however the Javascript files are not loading properly in Production. Everything works perfectly in Development.
I'm thinking that the issue is that in Production, I only see one .js file which has crammed a lot of javascript files together which is making it not load correctly.
This is how it looks on localhost:
And this is how it looks on the production server:
When I do a search through the production .js file I am missing a lot of code that is in those separate JS files loaded on localhost.
I have tried running RAILS_ENV=production bundle exec rake assets:clean assets:precompile and I can see all my assets in the /public/assets folder.
My production.rb file:
Rails.application.configure do
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.read_encrypted_secrets = true
config.public_file_server.enabled = true
config.assets.js_compressor = :uglifier
config.assets.compile = false
config.log_level = :debug
config.log_tags = [ :request_id ]
config.action_mailer.perform_caching = false
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
if ENV["RAILS_LOG_TO_STDOUT"].present?
logger = ActiveSupport::Logger.new(STDOUT)
logger.formatter = config.log_formatter
config.logger = ActiveSupport::TaggedLogging.new(logger)
end
config.active_record.dump_schema_after_migration = false
config.action_mailer.perform_deliveries = true
config.action_mailer.raise_delivery_errors = true
config.assets.digest = true
Rails.application.config.assets.precompile += %w( *.js ^[^_]*.css *.css.erb )
end
My application.js file:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require editable/bootstrap-editable
//= require editable/bootstrap2-editable
//= require editable/rails
//= require_tree .
The editable gem is x-editable and is used for In Place Editing.
UPDATE
This is how the stylesheets and javascripts are loaded in the application.html.erb file:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Try to config.assets.compile false to true then it will be like below
config.assets.compile = true
Hope it will work
I solved this by just manually downloading each JS file that appeared in the source code in Development, then uploading them to the server, and importing them manually one by one in the code as in the locahost screenshot!

Coffee script not loading after assets:precompile for my ActionCable chat function

I am building an chat function in my Ruby on Rails(v5.0.0) site. I had it finnaly working unteal I ran bundle exec rake assets:precompile for pushing it to production.
I can't seems to get it working again! And it's pretty stupid...
The problem
It looks like the files arn't loading anymore, none of the scripts are running on production or development.
Now when you enter a comment, you get an error of course cause there is no coffeeScript that takes over your request.
routes
mount ActionCable.server => '/cable'
application.hml.haml
= action_cable_meta_tag
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require cable.coffee
//= require jquery.turbolinks
//= require script.js
//= require bootstrap-sprockets
//= require cable
//= require metronome.js
//= require private_pub
//= require sticky.js
//= require waveform.js
//= require waveform.extensions.js
//= require timeline.js
//= require turbolinks
//= require_self
//= require_tree .
//= require serviceworker-companion
//= require addtohomescreen.js
//= require dragend.js
cable.coo
# app/assets/javascripts/cable.coffee
# Action Cable provides the framework to deal with WebSockets in Rails.
# You can generate new channels where WebSocket features live using the
# rails generate channel command.
#
# Turn on the cable connection by removing the comments after the require statements
# (and ensure it's also on in config/routes.rb).
#
#= require action_cable
#= require_self
#= require_tree ./channels
#App ||= {}
App.cable = ActionCable.createConsumer()
/channels/index.coffee
App.cable = ActionCable.createConsumer("/cable")
/channels/rooms.coffee
jQuery(document).on 'turbolinks:load', ->
messages = $('#messages')
if $('#messages').length > 0
App.global_chat = App.cable.subscriptions.create {
channel: "ChatRoomsChannel"
},
connected: ->
# Called when the subscription is ready for use on the server
disconnected: ->
# Called when the subscription has been terminated by the server
received: (data) ->
$('#messages_' + data['chat_room_id']).prepend($(data['message']).fadeIn(400))
$(document.getElementById('notification').src = 'https://www.jammify.com/metronome_low.mp3';notification.play());
send_message: (message, chat_room_id, user_id, receiver_id) ->
#perform 'send_message', message: message, chat_room_id: chat_room_id, user_id: user_id, receiver_id: receiver_id
$('.new_message').submit (e) ->
$this = $(this)
textarea = $this.find('#message_body')
chat_room_id = $this.find('#message_chat_room_id')
if $.trim(textarea.val()).length > 1
App.global_chat.send_message textarea.val(), chat_room_id.val(), $('#messages_' + chat_room_id.val()).data('user-id'), $('#messages_' + chat_room_id.val()).data('receiver-id')
textarea.val('')
e.preventDefault()
return false
You guys need anyting else?
It looks like the whole rooms.coffee is not loaded at all.

Heroku not including JS files but CSS files but works on localhost

Don't ignore this,yeah there are similar questions but not of the solutions worked for me.
I have a rails app on heroku but its not including my js files other than my
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
//= require js-routes
//= require axios
component.js
//= require lodash
//= require alt
//= require axios
//= require initialize
//= require_tree ./react
and yet none of the files in the application.js files are included, I just have jquery's code loaded into it but none of the other js files included.
config/production.rb
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.
config.cache_classes = true
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both threaded web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# Asset digests allow you to set far-future HTTP expiration dates on all assets,
# yet still be able to expire them through the digest params.
config.assets.digest = true
config.assets.compress = true
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
# Enable serving of images, stylesheets, and JavaScripts from an asset server.
# config.action_controller.asset_host = 'http://assets.example.com'
# Specifies the header that your server uses for sending files.
# config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
# Action Cable endpoint configuration
# config.action_cable.url = 'wss://example.com/cable'
# config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ]
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
# Use the lowest log level to ensure availability of diagnostic information
# when problems arise.
config.log_level = :debug
# Prepend all log lines with the following tags.
config.log_tags = [ :request_id ]
# Use a different logger for distributed setups.
# require 'syslog/logger'
# config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')
if ENV["RAILS_LOG_TO_STDOUT"].present?
config.logger = ActiveSupport::TaggedLogging.new(Logger.new(STDOUT))
end
# Use a different cache store in production.
# config.cache_store = :mem_cache_store
# Use a real queuing backend for Active Job (and separate queues per environment)
# config.active_job.queue_adapter = :resque
# config.active_job.queue_name_prefix = "noirbnb_#{Rails.env}"
config.action_mailer.perform_caching = false
# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation cannot be found).
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners.
config.active_support.deprecation = :notify
# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new
# Do not dump schema after migrations.
config.active_record.dump_schema_after_migration = false
config.assets.precompile += %w(*.js)
config.public_file_server.enabled = true
config.react.variant = :production
end
application.rb
require File.expand_path('../boot', __FILE__)
require 'rails/all'
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module Noirbnb
class Application < Rails::Application
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
config.assets.paths << Rails.root.join('vendor','assets', 'fonts','clever')
config.assets.enabled = true
config.serve_static_assets = true
end
end
I also tried
RAILS_ENV=production rake assets:precompile
But still my JS files are not loaded and not of my javascript files are loaded. I also have gem 'rails_12factor', group: :production in my Gemfile but still my JS files are not included.
I also tried heroku bash and ran rake assets:precompile but no difference.
Now I'm just tired and frustrated.

Javascript working in development locally but not production on Heroku

I've spent hours trying to figure out why my Javascript isn't working correctly in production on Heroku, but working perfectly fine on my local development server. From my debugging it seems the compiled application.js isn't firing in production, although other javascript_inclued_tags are.
I use the Heroku Cedar-14 stack, and below are the relevant files:
Gemfile
source 'https://rubygems.org'
gem 'rails', '4.2.0'
gem 'bcrypt', '3.1.7'
gem 'faker', '1.4.2'
gem 'will_paginate', '3.0.7'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'bootstrap-sass', '3.2.0.0'
gem 'sass-rails', '5.0.0.beta1'
gem 'fullcalendar-rails'
gem 'momentjs-rails', '2.9.0'
gem 'uglifier', '2.5.3'
gem 'jquery-turbolinks', '2.1.0'
gem 'bootswatch-rails', '3.2.4'
gem "font-awesome-sass"
gem 'responders', '~> 2.0'
gem 'mail_form', '1.5.0'
gem 'simple_form', '3.1.0.rc2'
gem 'stripe', '1.18.0'
gem 'carrierwave', '0.10.0'
gem 'cloudinary'
gem 'attachinary', '1.3.0'
gem 'mini_magick', '3.8.0'
gem 'fog', '1.23.0'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.0.0.beta2'
gem 'turbolinks', '2.3.0'
gem 'jbuilder', '2.2.3'
gem 'activeadmin', github: 'activeadmin'
gem "parsley-rails"
gem 'icalendar'
gem 'geokit'
gem 'schoolfinder'
gem 'timezone'
gem 'impressionist'
gem 'devise'
gem 'rubillow'
gem 'business_time'
gem 'owlcarousel-rails'
gem 'bootstrap-datepicker-rails', '1.4.0'
gem 'bootstrap-slider-rails'
gem 'sdoc', '0.4.0', group: :doc
gem 'gmaps4rails'
group :development, :test do
gem 'sqlite3', '1.3.9'
gem 'byebug', '3.4.0'
gem 'web-console', '2.0.0.beta3'
gem 'spring', '1.1.3'
end
group :test do
gem 'minitest-reporters', '1.0.5'
gem 'mini_backtrace', '0.1.3'
gem 'assert_json'
end
group :production do
gem 'pg', '0.17.1'
gem 'rails_12factor', '0.0.2'
gem 'unicorn', '4.8.3'
end
Application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.number
//= require functions
//= require bootbox.min
//= require jquery.ui.widget
//= require jquery.iframe-transport
//= require jquery.fileupload
//= require cloudinary/jquery.cloudinary
//= require attachinary
//= require houses
//= require turbolinks
//= require bootstrap
//= require moment
//= require moment-timezone-with-data-2010-2020
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.en-GB
//= require bootstrap-slider
//= require jquery.payment
//= require classie
//= require jquery.blueimp-gallery.min
//= require gsdk-bootstrapswitch
//= require gsdk-checkbox
//= require gsdk-radio
//= require jquery.validate
//= require jquery.bootstrap.wizard
//= require prettify
//= require index
//= require jquery.formatter
//= require elessar
//= require owl.carousel
//= require jquery-dateFormat.min
//= require perfect-scrollbar.jquery
//= require login
//= require agency
//= require wizard
//= require custom
environments/production.rb
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.
config.cache_classes = true
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both threaded web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Enable Rack::Cache to put a simple HTTP cache in front of your application
# Add `rack-cache` to your Gemfile before enabling this.
# For large-scale production use, consider using a caching reverse proxy like
# NGINX, varnish or squid.
# config.action_dispatch.rack_cache = true
# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
# config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# Asset digests allow you to set far-future HTTP expiration dates on all assets,
# yet still be able to expire them through the digest params.
config.assets.digest = true
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
# Specifies the header that your server uses for sending files.
# config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
config.force_ssl = true
# Use the lowest log level to ensure availability of diagnostic information
# when problems arise.
config.log_level = :debug
# Prepend all log lines with the following tags.
# config.log_tags = [ :subdomain, :uuid ]
# Use a different logger for distributed setups.
# config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
# Use a different cache store in production.
# config.cache_store = :mem_cache_store
# Enable serving of images, stylesheets, and JavaScripts from an asset server.
# config.action_controller.asset_host = 'http://assets.example.com'
# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation cannot be found).
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners.
config.active_support.deprecation = :notify
# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new
# Do not dump schema after migrations.
config.active_record.dump_schema_after_migration = false
config.action_mailer.raise_delivery_errors = true
config.action_mailer.delivery_method = :smtp
host = 'virgentrealty.com'
config.action_mailer.default_url_options = { host: host }
ActionMailer::Base.smtp_settings = {
:address => 'smtp.sendgrid.net',
:port => '587',
:authentication => :plain,
:user_name => ENV['SENDGRID_USERNAME'],
:password => ENV['SENDGRID_PASSWORD'],
:domain => 'heroku.com',
:enable_starttls_auto => true
}
end

Javascript works in dev but not prod. Looking for advice

all my js and css work in dev but not prod. I've been on this problem for 2 weeks. Please advise. Specifically type ahead drop downs are not working. I've tried a lot of reordering and such already, but let me know if you see something. I've tried precompiling and not precompiling. I've tried changing the values of the configuration file.
layouts/application.html.erb:
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
production.rb:
myApp::Application.configure do
# Settings specified here will take precedence over those in config/application.rb
# Code is not reloaded between requests
config.cache_classes = true
# Full error reports are disabled and caching is turned on
config.consider_all_requests_local = false
#default false ^^
config.action_controller.perform_caching = true
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = true
#defualt false
# Compress JavaScripts and CSS
config.assets.compress = true
#defualt true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true
#default = false
# Generate digests for assets URLs
config.assets.digest = true
# Defaults to nil and saved in location specified by config.assets.prefix
# config.assets.manifest = YOUR_PATH
# Specifies the header that your server uses for sending files
# config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
# See everything in the log (default is :info)
# config.log_level = :debug
# Prepend all log lines with the following tags
# config.log_tags = [ :subdomain, :uuid ]
# Use a different logger for distributed setups
# config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
# Use a different cache store in production
# config.cache_store = :mem_cache_store
# Enable serving of images, stylesheets, and JavaScripts from an asset server
# config.action_controller.asset_host = "http://assets.example.com"
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
config.assets.precompile += %w( jquery.js )
config.assets.precompile += %w( jquery_ujs.js )
config.assets.precompile += %w( jquery-ui-1.10.2.custom.js )
config.assets.precompile += %w( twitter/bootstrap.js )
config.assets.precompile += %w( bootstrap-typeahead.js )
config.assets.precompile += %w( rails.js )
config.assets.precompile += %w( autocomplete-rails.js )
# Disable delivery errors, bad email addresses will be ignored
# config.action_mailer.raise_delivery_errors = false
# Enable threaded mode
# config.threadsafe!
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation can not be found)
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners
config.active_support.deprecation = :notify
# Log the query plan for queries taking more than this (works
# with SQLite, MySQL, and PostgreSQL)
# config.active_record.auto_explain_threshold_in_seconds = 0.5
end
app/assets/application.js:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui-1.10.2.custom.min
//= require twitter/bootstrap
//= require highcharts
//= require highcharts/modules/canvas-tools
//= require highcharts/modules/exporting
//= require bootstrap-typeahead
//= require rails
//= require autocomplete-rails
//= require_tree .
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
} );
$(document).ready(function() {
$('.popover-myasset').popover();
});

Categories

Resources