Dark Knight
Dark Knight

Reputation: 307

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: JS files on localhost

And this is how it looks on the production server: JS files on 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' %>

Upvotes: 2

Views: 2378

Answers (2)

Dark Knight
Dark Knight

Reputation: 307

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!

Upvotes: 0

fool-dev
fool-dev

Reputation: 7777

Try to config.assets.compile false to true then it will be like below

config.assets.compile = true

Hope it will work

Upvotes: 2

Related Questions