Failed to upgrade to WebSocket error

[mwlang]

Just cloned the repo and got it working locally. When I fire up the app, I'm not seeing any errors per se, but this is constantly emitting to my console. Is this normal and expected?

17:23:13 rails.1               |
17:23:19 rails.1               | Started GET "/cable" for 127.0.0.1 at 2017-02-06 17:23:19 -0600
17:23:19 rails.1               | Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:19 -0600
17:23:19 rails.1               | Request origin not allowed: http://localhost:5000
17:23:19 rails.1               | Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
17:23:19 rails.1               | Finished "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:19 -0600
17:23:22 rails.1               | Started GET "/cable" for 127.0.0.1 at 2017-02-06 17:23:22 -0600
17:23:22 rails.1               | Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:22 -0600
17:23:22 rails.1               | Request origin not allowed: http://localhost:5000
17:23:22 rails.1               | Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
17:23:22 rails.1               | Finished "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:22 -0600
17:23:28 rails.1               | Started GET "/cable" for 127.0.0.1 at 2017-02-06 17:23:28 -0600
17:23:28 rails.1               | Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:28 -0600
17:23:28 rails.1               | Request origin not allowed: http://localhost:5000
17:23:28 rails.1               | Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
17:23:28 rails.1               | Finished "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:28 -0600
17:23:35 rails.1               | Started GET "/cable" for 127.0.0.1 at 2017-02-06 17:23:35 -0600
17:23:35 rails.1               | Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:35 -0600
17:23:35 rails.1               | Request origin not allowed: http://localhost:5000
17:23:35 rails.1               | Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
17:23:35 rails.1               | Finished "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:35 -0600
17:23:43 rails.1               | Started GET "/cable" for 127.0.0.1 at 2017-02-06 17:23:43 -0600
17:23:43 rails.1               | Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2017-02-06 17:23:43 -0600
17:23:43 rails.1               | Request origin not allowed: http://localhost:5000
17:23:43 rails.1               | Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)

[justin808]

Hi @mwlang. This is not expected. I'd google around as this seems like a problem with your setup rather than React on Rails.

[mwlang]

@justin808 found the problem. For whatever reason, the Foreman script is launching the Rails app on port 5000, but the allowed origins for cable connects (3000)

allowed origin setting in config/secrets.yml:

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/config/secrets.yml#L15

Foreman Procfile.hot output:

So, for whatever reason, Puma's starting on port 5000 and appears to be related to this line in config/puma.rb fetching PORT from environment:

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/config/puma.rb#L12

I did find a reference to how to fix on Stack Overflow, but no explanation to where the PORT environment variable is being set to 5000 (it doesn't exist until I fire up the app via foreman.

http://stackoverflow.com/questions/29595129/foreman-puma-isnt-using-the-specified-port-in-dev-env

I am not overly familiar with Puma nor Foreman, so I figured I'd bounce this one back to you to see if there a ready explanation. Meanwhile, changing the secrets.yml file to reference port 5000 was easy enough for me to continue with exploring the tutorial.

[mwlang]

On the back of that writeup, I just realized the universal solution is a simple change to the config/secrets.yml file to reference the ENV["PORT"] setting:

# Be sure to restart your server when you modify this file.

# Your secret key is used for verifying the integrity of signed cookies.
# If you change this key, all old signed cookies will become invalid!

# Make sure the secret is at least 30 characters and all random,
# no regular words or you'll be exposed to dictionary attacks.
# You can use `rake secret` to generate a secure secret key.

# Make sure the secrets in this file are kept private
# if you're sharing your code publicly.

development:
  secret_key_base: 231bf79489c63f8c8facd7bf27db1c2582a42a7f4302fccdb74ef35bc5dc91fb4e19dbf167f3003bdb4073818dfab4a9916890d193d535a7be458dbef1609800
  action_cable_url : http://localhost:<%= ENV["PORT"] %>

test:
  secret_key_base: 1ab8adbcf8410aebbce9b6dd6db7b5d090297bd22cf789b91ff44ae02711e8c128453d3e5c97eadf9066efe1a1e0dc1921faf7314d566c114d3ed60ae7ea614c
  action_cable_url : http://localhost:<%= ENV["PORT"] %>

# Do not keep production secrets in the repository,
# instead read values from the environment.
production:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
  action_cable_url : <%= ENV["SERVER_PORT"] %>

[justin808]

So, for whatever reason, Puma's starting on port 5000 and appears to be related to this line in config/puma.rb fetching PORT from environment:

You can also have this in your dot file:

export PORT=3000