Rails 5: JS files not loading in Production - javascript

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!

Related

Webpacker can't find entry.js in manifest.json

I am running this code in the development environment but I always get this error code and do not find any solution: I deleted the node-module and reinstalled it. I checked everything but nothing seems to work. All the answers are just for the production environment, but mine doesnt work in the development environment. Does anyone know why?
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}:
app/views/layouts/application.html.erb:9
my entry file is here:
this is my application.html.erb file:
<html>
<head>
<title>ProductHuntApp</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'entry' %>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<%= favicon_link_tag "https://res.cloudinary.com/dekgrddbo/image/upload/v1506108218/product-hunt-logo-orange-960_fvifwi.png" %>
</head>
<body>
<%= yield %>
</body>
</html>```
and here is my webpacker.yml file:
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
# Hot Module Replacement updates modules while the application is running without a full reload
hmr: false
# Inline should be set to true if using HMR; it inserts a script to take care of live reloading
inline: true
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
overlay: true
# Should we use gzip compression?
compress: true
# Note that apps that do not check the host are vulnerable to DNS rebinding attacks
disable_host_check: true
# This option lets the browser open with your local IP
use_local_ip: false
# When enabled, nothing except the initial startup information will be written to the console.
# This also means that errors or warnings from webpack are not visible.
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true

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.

Bootstrap css customizations and javascript not loading (Ruby 1.9.3p547, Rails 4.1.4)

I am building a basic RoR application right now, but in both my development and production environments, I am unable to make customizations to the boostrap css, and the javascript isn't loading (it is however for my JW Player on the homepage). For instance, the dropdown function isn't working for the navbar, and the "Destroy" function isn't working when I try to delete files.
Here is my Gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'
gem 'bootstrap-sass'
gem 'devise', '~> 3.1.0.rc2'
gem 'rake', '~> 10.3.2'
gem 'jwplayer-rails', '~> 1.0.1'
group :development, :test do
gem 'sqlite3'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
# Use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.1.2'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
*/-------------------------------------------------*/
Application.js:
//= require jwplayer.shuffle
//= require jwplayer.shuffle.min
//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
*/-------------------------------------------------*/
Application.css:
*= require_tree .
*= require_self
*/
*/-------------------------------------------------*/
I placed these css customizations in an scss file, which are not being recognized:
#import "bootstrap";
$body-bg: #ecf0f1;
$font-family-sans-serif: 'Lato', sans-serif;
$navbar-height: 110px;
$navbar-margin-bottom: 0px;
$navbar-default-bg: black;
$navbar-default-brand-color: #ffffff;
$brand-primary: #ff00ff;
$link-hover-color: #00ffff;
*/-------------------------------------------------*/
Application.html.rb file:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
Development.rb file:
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# In the development environment your application's code is reloaded on
# every request. This slows down response time but is perfect for development
# since you don't have to restart the web server when you make code changes.
config.cache_classes = false
# Do not eager load code on boot.
config.eager_load = false
# Show full error reports and disable caching.
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
# Don't care if the mailer can't send.
config.action_mailer.raise_delivery_errors = false
# Print deprecation notices to the Rails logger.
config.active_support.deprecation = :log
# Raise an error on page load if there are pending migrations.
config.active_record.migration_error = :page_load
# Debug mode disables concatenation and preprocessing of assets.
# This option may cause significant delays in view rendering with a large
# number of complex assets.
config.assets.debug = true
# Adds additional error checking when serving assets at runtime.
# Checks for improperly declared sprockets dependencies.
# Raises helpful error messages.
config.assets.raise_runtime_errors = true
# Raises error for missing translations
# config.action_view.raise_on_missing_translations = true
end
*/-------------------------------------------------*/
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 Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = false
# 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 = false
# Generate digests for assets URLs.
config.assets.digest = true
# `config.assets.precompile` has 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
# Set to :debug to see everything in the log.
config.log_level = :info
# 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 in app/assets folder are already added.
# config.assets.precompile += %w( search.js )
# 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
# Disable automatic flushing of the log to improve performance.
# config.autoflush_log = false
# 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
end
*/-------------------------------------------------*/
Can anyone provide assistance with this problem? I would greatly appreciate it. As I mentioned in the header, I am running ruby 1.9.3 and rails 4.1.4.
I think this is entirely an issue of ordering.
In your application.js, you should be requiring bootstrap after requiring jquery.
In your scss file, you should be doing #import "bootstrap"; after setting your variables.

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

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!

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