I'm setting up my Rails app on Heroku, and running into a problem where all my CSS assets are loaded but none of my JS assets are. I'm using memcached, and followed these instructions: https://devcenter.heroku.com/articles/rack-cache-memcached-rails31.
One thing I noticed is that when I change config.assets.compile to "true" in my production.rb file, all the JS is loaded successfully but obviously the initial load of the site is tremendously slow. How can I troubleshoot this problem? I'm new to Heroku, so am unsure and haven't found anything online that is helpful.
I assume that since all my JS files are in /assets/javascripts/, that the should be included automatically, but it seems as if they're not.
Here's my production.rb:
BrainDb::Application.configure do
# Settings specified here will take precedence over those in config/application.rb
client = Dalli::Client.new
config.action_dispatch.rack_cache = {
:metastore => client,
:entitystore => client,
:allow_reload => false
}
# 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
config.action_controller.perform_caching = true
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = true
config.static_cache_control = "public, max-age=2592000"
# Compress JavaScripts and CSS
config.assets.compress = true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
# Generate digests for assets URLs
config.assets.digest = true
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners
config.active_support.deprecation = :notify
end
I also removed everything from public/assets so it would precompile. Here's application.rb:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
if defined?(Bundler)
# If you precompile assets before deploying to production, use this line
Bundler.require(*Rails.groups(:assets => %w(development test)))
# If you want your assets lazily compiled in production, use this line
# Bundler.require(:default, :assets, Rails.env)
end
module BrainDb
class Application < Rails::Application
# Configure the default encoding used in templates for Ruby 1.9.
config.encoding = "utf-8"
# Configure sensitive parameters which will be filtered from the log file.
config.filter_parameters += [:password]
# Enable escaping HTML in JSON.
config.active_support.escape_html_entities_in_json = true
config.active_record.whitelist_attributes = true
config.assets.initialize_on_precompile = false
# Enable the asset pipeline
config.assets.enabled = true
config.cache_store = :dalli_store
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
end
end
UPDATE
Application.js:
//
//= require jquery
//= require jquery_ujs
Add
//= require_tree . at last and precompile
in your application.js.
Related
I'm using requirejs-rails version 0.9.8 on Rails 4.0.13. I'm running into an issue where requirejs is concatenating all of my JS files, but not minifying them.
Here's my requirejs.yml file:
paths:
'react' : 'react/react-with-addons'
'react-dom' : 'react/react-dom'
'react-router' : 'react-router/index'
'react-router-shim' : 'react-router-shim/react-router-shim'
'jquery' : 'jquery/dist/jquery'
'lodash' : 'lodash/lodash'
'flux' : 'flux/dist/Flux'
'es6-promise' : 'es6-promise/promise'
'event-emitter' : 'eventemitter2/lib/eventemitter2'
'object-assign' : 'object-assign/object-assign'
'async' : 'requirejs-plugins/src/async'
'moment' : 'moment/min/moment-with-locales.min'
'bootstrap' : 'bootstrap/bootstrap.min'
'material' : 'material-kit/material.min'
'material-kit' : 'material-kit/material-kit'
'jquery' : 'jquery/jquery.min'
shim:
'react-router-shim':
exports: 'React'
'react-router':
deps: ['react-router-shim']
exports: 'ReactRouter'
'material-kit':
deps: ['jquery', 'material', 'bootstrap']
'material':
deps: ['jquery', 'bootstrap']
'bootstrap':
deps: ['jquery']
exports: 'jquery'
'lodash':
exports: '_'
'object-assign':
exports: 'ObjectAssign'
And after running rake assets:precompile RAILS_ENV=production, I look into public/assets for the application-HASH file and see that it's just a big file with all of the JS concatenating. Here's my production.rb file as well:
App::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 thread 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 = true
# 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
# Generate digests for assets URLs.
config.assets.digest = true
# Version of your assets, change this if you want to expire all your assets.
config.assets.version = '1.1'
# 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 can not 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
end
EDIT
It looks like requirejs-rails is successfully minifying my JS files individually in my app's tmp/requirejs/dst directory, but these files aren't joined together to create the application-HASH.js file.
I found the issue.
There was a syntax error with my JavaScript source that was silently failing the build. It was only when I added logLevel: 0 to my requirejs.yml file that I was able to see the error Unexpected token operator «=», expected punc «,» (line: 11, col: 37, pos: 276).
I am working on a personal website Hosted in AWS. Using Ruby 1.9.3 Rails 4.1.0beta1. When I run the code locally, it works like a charm. However when I push to AWS, its missing either some JS files or some CSS files. I think it is missing JS files because if I remove the following from application.js
//= require_tree .
I can reproduce the issue locally.
Here is my Gem file:
source 'https://rubygems.org'
ruby '1.9.3'
#ruby-gemset=danielhamiltondotcom_rails_4_0
gem 'rails', '4.1.0.beta1'
group :development, :test do
gem 'rspec-rails', '2.13.1'
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
end
gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'
group :doc do
gem 'sdoc', '0.3.20', require: false
end
group :production do
gem 'rails_12factor', '0.0.2'
end
Here is my production.rb file:
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 thread 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 = true
# 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
# Generate digests for assets URLs.
config.assets.digest = true
# Version of your assets, change this if you want to expire all your assets.
config.assets.version = '1.0'
# 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 can not 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
config.assets.paths << Rails.root.join('app','assets','font')
config.assets.precompile += %w(.svg .eot .woff .ttf)
config.assets.precompile = ['*.js', '*.css', '*.css.erb']
end
Here is a snippet of the html.erb page.
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => false %>
<%= javascript_include_tag "application", "data-turbolinks-track" => false %>
I can't quite figure out which files are missing. Please let me know if you need more information. I have been looking around all over and haven't been able to resolve this issue.
I have tried this: Rails 4: assets not loading in production.
I was able to resolve this issue:
1) I had an extra ) in my css file. I removed that to address the compile error that AWS was giving.
2) In my Application.js file I manually required all JS files needed instead of just using the tree:
//= require jquery
//= require modernizr
//= require bootstrap
//= require jquery.fitvids
//= require jquery.easing.1.3
//= require twitter
//= require jquery.fancybox.pack
//= require jquery.fancybox-thumbs
//= require jquery.fancybox-media
//= require stellar
//= require nicescroll.min
//= require jquery.isotope.min
//= require custom
//= require custom-home
//= require portfolio
//= require jquery.flexslider
//= require retina
3) I added gem 'sprockets', '2.8' to my GemFile which i had previously omitted.
Try
RAILS_ENV=production bundle exec rake assets:precompile
Also check your prod server and make sure the asset files are there under public.
I have a number of environments where I deploy an application. In two of them I deploy the following configuration for assets:
config.assets.enabled = true
config.assets.compress = false
config.assets.compile = true
config.assets.precompile = false
config.assets.digest = true
config.assets.debug = false
config.serve_static_assets = true
My applicaton.js, that compiles a number of .js files on it, is not getting a fingerprint, so I don't serve changes to customers that have already cached it.
The web page then serves all assets precompiled with fingerprint except application.js
Where can I start to look for this failure?
The culprit is the following option :
config.assets.compile = true
It will live compile each file without fingerprint and serve them straight for rails
You should set it to false and use config.assets.precompile which should contain the list of all precompiled filed :
config.assets.precompile += %w(application.js foo.js)
Then don't forget to run rake assets:precompile in your deployment task to recompile new assets.
On a side note, you should also set config.serve_static_assets to false and let nginx / apache / your web server handle it for you, serving assets from rails has a big overhead.
I can't get Javascript to load in the browser in the rails test environment. This is problematic for cucumber selenium tests through capybara. Here's my test.rb (the default as far as I know)
MyApp::Application.configure do
# Settings specified here will take precedence over those in config/application.rb
# The test environment is used exclusively to run your application's
# test suite. You never need to work with it otherwise. Remember that
# your test database is "scratch space" for the test suite and is wiped
# and recreated between test runs. Don't rely on the data there!
config.cache_classes = true
# Configure static asset server for tests with Cache-Control for performance
config.serve_static_assets = true
config.static_cache_control = "public, max-age=3600"
# Log error messages when you accidentally call methods on nil
config.whiny_nils = true
# Show full error reports and disable caching
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
# Raise exceptions instead of rendering exception templates
config.action_dispatch.show_exceptions = false
# Disable request forgery protection in test environment
config.action_controller.allow_forgery_protection = false
# Tell Action Mailer not to deliver emails to the real world.
# The :test delivery method accumulates sent emails in the
# ActionMailer::Base.deliveries array.
config.action_mailer.delivery_method = :test
# Raise exception on mass assignment protection for Active Record models
config.active_record.mass_assignment_sanitizer = :strict
# Print deprecation notices to the stderr
config.active_support.deprecation = :stderr
end
This results in a concatinated application.js with everything. I've tried adding config.assets.debug = true so that the assets aren't concatinated, and then only sometimes the javascript is loaded. If I copy over development.rb it seems to work, but that doesn't seem ideal.
Thanks!
Turns out it was the less-rails-bootstrap version 3.0.1 gem was loading twitter/bootstrap in the wrong order due to inter-dependencies. We never noticed this is in development because Rails does not compress assets in the development environment, by default. So those particular files weren't being loaded, but they didn't keep all of our javascript from loading like they were in test.
Upgrading to less-rails-bootstrap 3.0.3, or requiring individual components of twitter/bootstrap in the correct order in application.js solved the problem.
An image was causing a problem on my heroku app so I changed config.assets.compile = false to config.assets.compile = true in production.rb. I then ran rake assets:precompile and pushed to the heroku server. Jquery works fine on the app website, but no longer works on my local copy. No errors are thrown in the javascript console. Here are some important files as they stand now.
Production.rb
Nonogrammed::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
config.action_controller.perform_caching = 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.compress = true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = 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 )
# 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
Application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.core
//= require jquery.ui.widget
//= require jquery.ui.mouse
//= require jquery.ui.draggable
//= require twitter/bootstrap
//= require_tree .
$(function() {
$( "#draggable" ).draggable({ handle: "#handle" , containment: [0,0,1200,1000] , cursor: "crosshair" });
});
UPDATE: This was caused by deleting an image , making a new image with the same name, and then pushing to heroku. Don't do that!
There's no need to precompile on your local. Sprockets automatically compiles static asset at server start.
To resolve things, delete the compiled files in the public/assets directory, commit your changes, then deploy to Heroku again.
Then, in Heroku, compile your assets by running the following from your command line:
# from command line via the Heroku Toolbelt
rake run assets:precompile
Your local assets will compile on server start (thus rendering jQuery usable again), and your assets on Heroku will be precompiled to the public/assets directory as they should be.
UPDATE:
You may need to clear your browser cache to ensure that the updated asset path is loaded into your markup.