JavaScript fails on a fresh Rails App deployed to Heroku

[Elias Kechter]

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

[Hassan Schroeder]

On Tue, Sep 4, 2018 at 4:58 AM, Elias Kechter <Elias....@t-online.de> wrote:
> I think there is a big problem with JavaScript files in Rails 5 apps in
> Production environment on Heroku.

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

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!
--
Hassan Schroeder ------------------------ hassan.s...@gmail.com
twitter: @hassan
Consulting Availability : Silicon Valley or remote

[Elias Kechter]

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

[Hassan Schroeder]

On Tue, Sep 4, 2018 at 1:34 PM, Elias Kechter <Elias....@t-online.de> wrote:

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

<https://gist.github.com/hassan/f7b6fdd25330586129fafed544404ec4>

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

[Elias Kechter]

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

[Hassan Schroeder]

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

Cheers,