Rails + Javascript + Heroku = Sadness

Published on: Wednesday 10/18/2017

Author: Kelly-Ann
Project: Dog Informant

It started out so well

I wrote a simple little jquery script for my Rails app to make a hidden element appear and slide down (the user input form on my Dog Informant app.) It worked great on local host! And then I deployed it to Heroku, where it did not work.

So I started diving into Stack Overflow questions, where I found that this was a common problem with Rails 3 and 4, but is mostly not a problem for Rails 5, which I am using.

Curiously, the script did seem to get properly compiled and deployed to the application.js file on Heroku. When I would "view page source" and then click to the js file that the page linked to, I could see my code right in there. The console wasn't giving me any errors about loading it either. But it just didn't work.

The search

I spent the afternoon and evening trying different solutions. After all--plenty of other people must be deploying JavaScript in their Rails apps on Heroku--right? So this must be solveable.

Common issue 1: Turbolinks messes up loading of JavaScript.

The solution here is to prepend the JS with a command to load the JS when turbolinks loads.

$(document).on('turbolinks:load', function() { 
your code here 

This did not make any difference for me. I also tried commenting out the turbolinks gem and removing references to it from application.html.erb and application.js but that also didn't help.

Common Issue #2: Heroku is using an outdated version of application.js

The various solutions here involved deleting everything from your public/assets folder, as older versions of compiled docs hang out there. Then precompile assets. Then deploy to Heroku.

Unfortunately, this didn't help me. I did have the issue of Heroku serving up outdated compiled files, but once corrected through this method, I could see the up to date code in the compiled js file, but no sliding into view would happen when I clicked my button.

Uncommon Issue: One person had an issue that sounded very similar to mine--he could see his script in the deployed file, but it wasn't running.

He moved his script from it's own file and plopped it directly into application.js before compiled (yes, this isn't right--it was just to see.) And then it worked for him! But no conclusions were posted about why this might work and compiling wouldn't.

I gave this a shot to see if it was my issue, but it didn't make a difference.

Hints and scraps

Heroku uses https hosting now, and some people had issues linking to jquery CDN's that didn't have https in the address. I am using the jquery-rails gem so I think the jquery source is part of my app.

No solution?

Well, maybe not for me, not right now. None of the solutions made any difference to me. Except . . . Heroku had a page where they suggested hosting your "static assets" on a CDN like Amazon's CloudFront, so as not to use up your dynos serving static content.

Temporarily solution

So I tried hosting the script on one of my pages that is hosted at SiteGround, rather than Heroku. Instead of compiled the script into application.js, I just link to it in the "head" tags of application.html.erb. And it works!

It's time to move on, to keep using my time to learn to make apps. Hopefully along the way, the real solution to this issue will become clear through something else that I learn about Rails.

Edit - Actual Solution

So following a tutorial that used Yarn to install jquery into a Rails app, I saw that jquery worked fine in that new rails app. So I used Yarn to install jquery into my Dog Informant app, and now jquery works fine. So, not sure why including jquery gem didn't work, but I will be sticking with this Yarn solution!

Leave a reply