React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS

Question

I am deploying a React app but am getting a strange error when I visit the page over https.

When I visit the page over https I receive the following error:

S

Answer 1

You need to look at this article from Create-React-App website. It explain how to deploy React app created with 'Create-React-App' properly which point to specific buildpack for React app, mars/create-react-app-buildpack, at Github that you needed when creating Heroku app.

https://create-react-app.dev/docs/deployment/#heroku

https://github.com/mars/create-react-app-buildpack

I had the same problem with insecure websocket issue everyone is having here, so I tested the solution from Create-React-App article. It solved the problem. No need to modify node_module or anything.

All you need to do is us this command when creating heroku app from CLI at the root of React app:

heroku create --buildpack mars/create-react-app

then:

git push heroku master

when you go to your website at Heroku. it will run as expected without any "insecure websocket" error.

(I don't know how to add mars/create-react-app buildpack to it AFTER you already created/deployed to Heroku. I haven't got to that part yet.)

The above solution seems to be addressing the issue that the team of create-react-app have for deploying to Heroku.