Rails : CSS/Javascript working fine locally but not on Heroku

Question

I have Rails site with a lot of css animation effects and javascript.The CSS transitions works very well locally but on heroku it doesn't work.

Here's my heroku logs:

2013-09-17T17:13:36.081145+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:13:36.090362+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:13:36.095232+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.112.95.211" dyno=web.1 connect=8ms service=76ms status=200 bytes=9364
2013-09-17T17:13:36.093622+00:00 app[web.1]: Completed 200 OK in 23ms (Views: 23.3ms | ActiveRecord: 0.0ms)
2013-09-17T17:14:04.285779+00:00 app[web.1]: Started GET "/" for 184.73.237.85 at 2013-09-17 17:14:04 +0000
2013-09-17T17:14:04.295330+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.7ms)
2013-09-17T17:14:04.297096+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:14:04.297669+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:14:04.293765+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:14:04.298185+00:00 app[web.1]: Completed 200 OK in 4ms (Views: 4.0ms | ActiveRecord: 0.0ms)
2013-09-17T17:14:25.467941+00:00 app[web.1]: Started GET "/" for 50.31.164.139 at 2013-09-17 17:14:25 +0000
2013-09-17T17:14:25.471566+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:14:25.473029+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.5ms)
2013-09-17T17:14:25.474304+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.1ms)
2013-09-17T17:14:25.474637+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.1ms)
2013-09-17T17:14:25.474906+00:00 app[web.1]: Completed 200 OK in 3ms (Views: 3.1ms | ActiveRecord: 0.0ms)
2013-09-17T17:14:32.746728+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:14:32.749786+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.6ms)
2013-09-17T17:14:32.752910+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:14:32.754486+00:00 app[web.1]: Completed 200 OK in 8ms (Views: 7.9ms | ActiveRecord: 0.0ms)
2013-09-17T17:14:32.757737+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.18.57.7" dyno=web.1 connect=6ms service=22ms status=200 bytes=9364
2013-09-17T17:14:32.752635+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:14:32.739628+00:00 app[web.1]: Started GET "/" for 50.18.57.7 at 2013-09-17 17:14:32 +0000
2013-09-17T17:14:36.022520+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.112.95.211" dyno=web.1 connect=1ms service=17ms status=200 bytes=9363
2013-09-17T17:14:36.014483+00:00 app[web.1]: Started GET "/" for 50.112.95.211 at 2013-09-17 17:14:36 +0000
2013-09-17T17:14:36.018297+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:14:36.019310+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.4ms)
2013-09-17T17:14:36.020303+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:14:36.020870+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:14:36.021156+00:00 app[web.1]: Completed 200 OK in 3ms (Views: 2.6ms | ActiveRecord: 0.0ms)
2013-09-17T17:12:36.139203+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.112.95.211" dyno=web.1 connect=8ms service=76ms status=200 bytes=9364
2013-09-17T17:14:04.307158+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="184.73.237.85" dyno=web.1 connect=2ms service=33ms status=200 bytes=9363
2013-09-17T17:15:04.286346+00:00 app[web.1]: Started GET "/" for 184.73.237.85 at 2013-09-17 17:15:04 +0000
2013-09-17T17:15:04.296350+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:15:04.291552+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:15:04.294772+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (1.1ms)
2013-09-17T17:15:04.295991+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:15:04.300498+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="184.73.237.85" dyno=web.1 connect=2ms service=18ms status=200 bytes=9363
2013-09-17T17:15:04.296642+00:00 app[web.1]: Completed 200 OK in 5ms (Views: 3.3ms | ActiveRecord: 0.0ms)
2013-09-17T17:15:25.038230+00:00 app[web.1]: Started GET "/" for 50.31.164.139 at 2013-09-17 17:15:25 +0000
2013-09-17T17:15:25.043176+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:15:25.049132+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (3.0ms)
2013-09-17T17:15:25.058446+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.2ms)
2013-09-17T17:15:25.060844+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:15:25.062469+00:00 app[web.1]: Completed 200 OK in 19ms (Views: 16.3ms | ActiveRecord: 0.0ms)
2013-09-17T17:15:25.076219+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.31.164.139" dyno=web.1 connect=8ms service=43ms status=200 bytes=9364
2013-09-17T17:15:32.751654+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:15:32.748045+00:00 app[web.1]: Started GET "/" for 50.18.57.7 at 2013-09-17 17:15:32 +0000
2013-09-17T17:15:32.754891+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.5ms)
2013-09-17T17:15:32.758385+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:15:32.759377+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:15:32.759377+00:00 app[web.1]: Completed 200 OK in 5ms (Views: 4.8ms | ActiveRecord: 0.0ms)
2013-09-17T17:15:36.056468+00:00 app[web.1]: Started GET "/" for 50.112.95.211 at 2013-09-17 17:15:36 +0000
2013-09-17T17:15:36.067383+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:15:36.073959+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.5ms)
2013-09-17T17:15:36.082465+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:15:36.095186+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:15:36.099386+00:00 app[web.1]: Completed 200 OK in 26ms (Views: 26.3ms | ActiveRecord: 0.0ms)
2013-09-17T17:17:04.303536+00:00 app[web.1]: Started GET "/" for 184.73.237.85 at 2013-09-17 17:17:04 +0000
2013-09-17T17:17:04.319749+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:17:04.323405+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (1.2ms)
2013-09-17T17:17:04.334156+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="184.73.237.85" dyno=web.1 connect=2ms service=50ms status=200 bytes=9364
2013-09-17T17:17:04.328114+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:17:04.328750+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:17:04.329386+00:00 app[web.1]: Completed 200 OK in 8ms (Views: 7.7ms | ActiveRecord: 0.0ms)
2013-09-17T17:17:25.392714+00:00 app[web.1]: Started GET "/" for 50.31.164.139 at 2013-09-17 17:17:25 +0000
2013-09-17T17:17:25.401476+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:17:25.405039+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.4ms)
2013-09-17T17:17:25.406448+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:17:25.506696+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.1ms)
2013-09-17T17:17:25.521056+00:00 app[web.1]: Completed 200 OK in 119ms (Views: 119.2ms | ActiveRecord: 0.0ms)
2013-09-17T17:17:25.541871+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.31.164.139" dyno=web.1 connect=11ms service=156ms status=200 bytes=9365
2013-09-17T17:17:32.735294+00:00 app[web.1]: Started GET "/" for 50.18.57.7 at 2013-09-17 17:17:32 +0000
2013-09-17T17:17:32.739651+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:17:32.741337+00:00 app[web.1]:   Rendered main/index.html.erb within layou
ts/application (0.9ms)
2013-09-17T17:17:32.742936+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:17:32.743353+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:17:32.743938+00:00 app[web.1]: Completed 200 OK in 4ms (Views: 3.9ms | ActiveRecord: 0.0ms)
2013-09-17T17:17:36.000520+00:00 app[web.1]: Started GET "/" for 50.112.95.211 at 2013-09-17 17:17:36 +0000
2013-09-17T17:17:36.004359+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:17:36.005844+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.4ms)
2013-09-17T17:17:36.007268+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:17:36.006966+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:17:36.016932+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.112.95.211" dyno=web.1 connect=3ms service=19ms status=200 bytes=9363
2013-09-17T17:17:36.007485+00:00 app[web.1]: Completed 200 OK in 3ms (Views: 3.0ms | ActiveRecord: 0.0ms)
2013-09-17T17:14:25.479145+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.31.164.139" dyno=web.1 connect=6ms service=14ms status=200 bytes=9363
2013-09-17T17:15:36.112917+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.112.95.211" dyno=web.1 connect=7ms service=59ms status=200 bytes=9364
2013-09-17T17:17:32.750712+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="50.18.57.7" dyno=web.1 connect=2ms service=19ms status=200 bytes=9363
2013-09-17T17:19:04.336378+00:00 app[web.1]: Started GET "/" for 184.73.237.85 at 2013-09-17 17:19:04 +0000
2013-09-17T17:19:04.360109+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:19:04.362204+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.4ms)
2013-09-17T17:19:04.364388+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:19:04.364866+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:19:04.368083+00:00 app[web.1]: Completed 200 OK in 7ms (Views: 6.6ms | ActiveRecord: 0.0ms)
2013-09-17T17:19:04.376738+00:00 heroku[router]: at=info method=GET path=/ host=robots.herokuapp.com fwd="184.73.237.85" dyno=web.1 connect=2ms service=97ms status=200 bytes=9363
2013-09-17T17:19:24.935270+00:00 app[web.1]: Started GET "/" for 50.31.164.139 at 2013-09-17 17:19:24 +0000
2013-09-17T17:19:24.935270+00:00 app[web.1]: Processing by MainController#index as */*
2013-09-17T17:19:24.935270+00:00 app[web.1]:   Rendered main/index.html.erb within layouts/application (0.5ms)
2013-09-17T17:19:24.935270+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:19:24.939841+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
2013-09-17T17:19:24.946719+00:00 app[web.1]: Completed 200 OK in 20ms (Views: 20.1ms | ActiveRecord: 0.0ms)   

And I have the javascripts and Css in the assets/javascripts and stylesheets folder.

All the assets are being compiled on runtime:

And also they are loaded on heroku ( I can see in the head section using firebug). Here is the site and here is the code and this is what it should be

Why is it so happening that it works fine locally but not on heroku?

Answer 1

On heroku (production) all your javascript files are concatenated into application.js, but locally in development they remain their own files. The issue you're experiencing is one of load order. To fix this do 2 things.

# 1 Delete the jquery * .js file in your assets/javascripts directory - you're already using jquery-rails so this is a duplicate # 2 Rename modernizer to get it load before the box layout javascript. (Its pulling alphabetically so it needs to appear before the letter 'b')

I use the prefix al-<number>-original-filename because in my head alphaload makes perfect sense, but you should use whatever keeps it straight for you. So for me that files would become

al-01-modernizr.custom.js