Advice with organizing .js files in my rails app

Question

I've got a rails app that's driving me crazy. I can't figure out why I'm getting duplicate js calls. I'm guessing it's something to do with the ordering or organization of the application.js require statements and the location of the .js files. I've also tried screwing around with production.rb and usually only make the .js completely broken with that. Here's what I've got:

app
|assets
||javascripts
|||+data_centers
|||-data_center.js
||-application.js
||-rails.js


vendor
|assets
||javascripts
||-autocomplete-rails.js
||-jquery-1.9.1.js
||-jquery-ui-1.10.2.custom.js

application.js has the following require statements:

//= require jquery-1.9.1
//= require jquery-ui-1.10.2.custom
//= require twitter/bootstrap
//= require bootstrap-typeahead
//= require rails
//= require autocomplete-rails

data_center.js has the following require statements:

//= require highcharts
//= require highcharts/modules/canvas-tools
//= require highcharts/modules/exporting

Before, I had the .js files from vendor/assets in app/assets but was advised to keep all external .js in the vendor/assets location. Point is that doesn't work.

My production.rb looks like this:

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 = false
  #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

Please let me know if you have any ideas. Thanks.

Answer 1

You could try config.assets.debug = true in your production.rb to get a better picture, but I'd suggest first trying to debug problems with assets in development.

Some gems or their dependencies may be loading assets that you might not have been aware of.

In Rails console in the environment you are interested in (i.e. you might need to ssh to the server, etc. and/or set the environment in/before the command):

rails c

you might use the following to get a little more info from Sprockets about current assets:

Rails.application.assets.each_file {|path| begin; Rails.application.assets[path].dependencies.each{|d| puts "#{path} dependencies: /assets/#{d.logical_path}"}; rescue; puts "#{path}"; end}

Then you might look at gem list in your prod environment or look at Gemfile.lock to see what gems bundler is using. Maybe assets are being loaded that you didn't know about.

For asset organization, see the guide.

Also, consider that the guide suggests some different settings than what you are using in your production config, e.g. it suggests using config.assets.compress = true and to set config.serve_static_assets = false and have apache or nginx serve static assets, for performance reasons.