Question

I am trying to set up a modal jQuery script in my application and it works on local/development, but when I push it to heroku, the script does not work.

I viewed the html source and I think it has something to do with the asset pipeline. I have assets compiling during slug compilation (heroku push).

Here is what the source looks like on local:

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/photos.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.masonry.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.simplemodal-1.4.3.js?body=1" type="text/javascript"></script>
<script src="/assets/pages.js?body=1" type="text/javascript"></script>
<script src="/assets/photos.js?body=1" type="text/javascript"></script>
<script src="/assets/photos.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" type="text/css" />

However, on production (heroku), I am only getting:

<link href="/assets/application-0183e1470ce8e2ba6f27e018f2b8aabf.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/application-20571ddeb4d7b86e69d16370f197cec1.js" type="text/javascript"></script>
<link href="/assets/custom-3ab2912a0b988babf6979cc153672fe0.css" media="screen" rel="stylesheet" type="text/css" />

This is what my application.html.erb looks like:

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag 'custom', :media => 'screen' %>
<%= csrf_meta_tags %>

and my application.js

//= require jquery
//= require jquery_ujs
//= require_tree .

Any clue how I can load all my javascript/jQuery files on production?
Let me know if you guys need any additional files.

Thanks.

Answer 1

Have you tried compiling assets locally?
Slug compilation seems unstable to me (it hates bootstrap).

RAILS_ENV=production bundle exec rake assets:precompile

git add public/assets

git commit -m "vendor compiled assets"

https://devcenter.heroku.com/articles/rails3x-asset-pipeline-cedar