JavaScript fails on a fresh Rails App deployed to Heroku

I think there is a big problem with JavaScript files in Rails 5 apps in Production environment on Heroku.

Steps to reproduce

Step 1: Creating a new Rails 5 App and switching to the root folder

rails new my_app --database=postgresql cd my_app

Step 2: Generate a controller

rails generate controller static_pages

Step 3: edit the /app/controllers/static_pages_controller file

class StaticPagesController < ApplicationController def show end

def destroy end end

Step 4: create the views to show with the actions /app/views/static_pages/show.html.erb :

this is the show view here is a link to the delete action:

<%= link_to t(‘logout’), logout_path, method: :delete %>

/app/views/static_pages/destroy.html.erb :

this is the destroy view which is called with a link_to method: :delete

Step 5: edit the /config/routes.rb file

Rails.application.routes.draw do root ‘static_pages#show’ get ‘static_pages/show’ delete ‘/logout’, to: ‘static_pages#destroy’ end

Step 6: check the routes

rails routes Prefix Verb URI Pattern Controller#Action root GET / staticpages#show staticpages_show GET /staticpages/show(.:format) staticpages#show logout DELETE /logout(.:format) staticpages#destroy rails_service_blob GET /rails/active_storage/blobs/:signed_id/*filename(.:format) active_storage/blobs#show rails_blob_representation GET /rails/active_storage/representations/:signed_blob_id/:variation_key/*filename(.:format) active_storage/representations#show rails_disk_service GET /rails/active_storage/disk/:encoded_key/*filename(.:format) active_storage/disk#show update_rails_disk_service PUT /rails/active_storage/disk/:encoded_token(.:format) active_storage/disk#update rails_direct_uploads POST /rails/active_storage/direct_uploads(.:format) active_storage/direct_uploads#create

Step 7: create the DB and migrate

rails db:create Created database ‘my_app_development’ Created database ‘my_app_test’

rails db:migrate

Step 8: start the server

rails server

Step 9: go to localhost:3000/ and click the link presented. the link works and send a delete action to the server

Started GET “/” for 127.0.0.1 at 2018-09-03 18:43:52 +0200 Processing by StaticPagesController#show as HTML Rendering static_pages/show.html.erb within layouts/application Rendered static_pages/show.html.erb within layouts/application (12.2ms) Completed 200 OK in 504ms (Views: 486.7ms | ActiveRecord: 0.0ms)

Started DELETE “/logout” for 127.0.0.1 at 2018-09-03 18:43:57 +0200 Processing by StaticPagesController#destroy as HTML Parameters: {“authenticity_token”=>“10NHmV8N4tF3O0r/YYtKtKmHm3xthGjPAE51osb7L9skCM5ZoM2RoiCtZD4Crh9d69ndTOeNRMmIW28ipI/z9A==”} Rendering static_pages/destroy.html.erb within layouts/application Rendered static_pages/destroy.html.erb within layouts/application (0.0ms) Completed 200 OK in 90ms (Views: 73.0ms | ActiveRecord: 0.0ms)

Step 10: create a heroku app(you have to be logged in to heroku on your system)

heroku create

Step 11: push your work to Heroku

git add -A git commit -m “init” git push --set-upstream heroku master

Step 12: open your Heroku app and do like in Step 9 and fail because JavaScript seems to not work correctly

2018-09-03T16:47:44.020623+00:00 app[web.1]: I, [2018-09-03T16:47:44.020478 #4] INFO – : [7ef6b0a3-85b3-43e8-9c16-c7ff8c48fb55] Started GET “/” for 84.147.254.28 at 2018-09-03 16:47:44 +0000 2018-09-03T16:47:44.024722+00:00 app[web.1]: I, [2018-09-03T16:47:44.024633 #4] INFO – : [7ef6b0a3-85b3-43e8-9c16-c7ff8c48fb55] Processing by StaticPagesController#show as HTML 2018-09-03T16:47:44.040738+00:00 app[web.1]: I, [2018-09-03T16:47:44.040614 #4] INFO – : [7ef6b0a3-85b3-43e8-9c16-c7ff8c48fb55] Rendering static_pages/show.html.erb within layouts/application 2018-09-03T16:47:44.050161+00:00 app[web.1]: I, [2018-09-03T16:47:44.050059 #4] INFO – : [7ef6b0a3-85b3-43e8-9c16-c7ff8c48fb55] Rendered static_pages/show.html.erb within layouts/application (9.2ms) 2018-09-03T16:47:44.052153+00:00 app[web.1]: I, [2018-09-03T16:47:44.052076 #4] INFO – : [7ef6b0a3-85b3-43e8-9c16-c7ff8c48fb55] Completed 200 OK in 27ms (Views: 13.7ms) . . . 2018-09-03T16:48:05.398306+00:00 app[web.1]: I, [2018-09-03T16:48:05.398164 #4] INFO – : [8a98d378-b0f3-4a6f-8424-87c696f75c6f] Started GET “/logout” for 84.147.254.28 at 2018-09-03 16:48:05 +0000 2018-09-03T16:48:05.399185+00:00 app[web.1]: F, [2018-09-03T16:48:05.399095 #4] FATAL – : [8a98d378-b0f3-4a6f-8424-87c696f75c6f] 2018-09-03T16:48:05.399450+00:00 app[web.1]: [8a98d378-b0f3-4a6f-8424-87c696f75c6f] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_dispatch/middleware/show_exceptions.rb:33:in ‘call’ 2018-09-03T16:48:05.399271+00:00 app[web.1]: F, [2018-09-03T16:48:05.399190 #4] FATAL – : [8a98d378-b0f3-4a6f-8424-87c696f75c6f] ActionController::RoutingError (No route matches [GET] “/logout”): 2018-09-03T16:48:05.399457+00:00 app[web.1]: [8a98d378-b0f3-4a6f-8424-87c696f75c6f] vendor/bundle/ruby/2.4.0/gems/railties-5.2.1/lib/rails/rack/logger.rb:38:in ‘call_app’ 2018-09-03T16:48:05.399345+00:00 app[web.1]: F, [2018-09-03T16:48:05.399273 #4] FATAL – : [8a98d378-b0f3-4a6f-8424-87c696f75c6f] 2018-09-03T16:48:05.399447+00:00 app[web.1]: F, [2018-09-03T16:48:05.399369 #4] FATAL – : [8a98d378-b0f3-4a6f-8424-87c696f75c6f] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_dispatch/middleware/debug_exceptions.rb:65:in `call’

This is either an obvious error on Rails or on Heroku’s side as all you see I did was jsut create a fresh new rails app and changed the routes, generated a controller and made 2 views for the controller actions.

Here are the links if you want to check out all the sources for the app and the app deployed to heroku.

You can check the source code here: https://bitbucket.org/Jaiel/my_app/src/master/

And the app here: https://rocky-inlet-61318.herokuapp.com/

Expected behavior

Links with the method: :delete should work as intended and send out DELETE requests

Actual behavior

Links with method: :delete send out GET requests JavaScript not working properly

System configuration

Windows: 10 Education Rails: 5.2.1 Ruby: 2.4.4p296 Heroku: heroku/7.7.7 win32-x64 node-v10.7.0 postgres: postgres (PostgreSQL) 10.3

You probably need to figure out why your app above shows JS errors in the console on load; do you see any errors in the Heroku loading messages?

Also, test it locally in production mode and see if there's any difference in behavior.

HTH!

I have tried to start it in production mode:

rails db:create -RAILS_ENV=producion rails db:migrate -RAILS_ENV=producion rails assets:precompile rails s -e production

It does not work in production either. The Error is now

Failed to load resource: the server responded with a status of 404 (Not Found) application-c03f5e3e45f2560ad956471c98585d2b01a757f4cd94b552550afbd8eb320c21.js:1

Failed to load resource: the server responded with a status of 404 (Not Found) application-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css:1

Failed to load resource: the server responded with a status of 404 (Not Found) application-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css:1

<https://gist.github.com/hassan/f7b6fdd25330586129fafed544404ec4&gt;

I am def not an expert with the asset pipeline -- try to minimize JS usage, anyway -- but commenting out the js_compressor line in the config/environments/production.rb got my local copy of your app to stop using GET instead of DELETE on your logout example.

Hope that points you in the right direction!

Hassan

Hey Hassan,

yes this would have helped me alot. I figured it out yesterday after I wrote the alst emssage. It was all the failure of the uglifier gem. I changed the gem version to 3.0.8 (it was 4.1.18 before) and it worked. The uglifier gem somehow produced corrupted JS files. But you would have been a great help thank you for taking the time

Glad you tracked it down; that was definitely an interesting exercise!

Cheers,