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.

Answer 2

anyone who is struggling with this issue on heroku deployment downgrade you reac-scripts module to 3.2.0 .

1. remove package-lock.json file
2. remove node_modules folder
3. replace react-scripts version to 3.2.0
4. npm install all modules again

Answer 3

• Create in the back of the folder and node.js app
• Create express router in the root of your app
• Make a server.js file

Add this code into server.js

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')))
  // Handle React routing, return all requests to React app
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'))
  })
}
const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`API listening on port ${port}...`)
})

Into to pakage.json

,
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

And add the route proxy in to /folder-name-react-app/pakage.json

  "proxy": "http://localhost:8080"

Answer 4

For folks waiting for react-scripts for a patch:

For local testing over https, you can manually edit

node_modules/react-dev-utils/webpackHotDevClient.js

Here's the code you'll want at line 62 of that file:

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

For deployment follow below steps:

npm install -g serve // This can be done locally too

npm run build

And Then in your package.json add a deploy script to work with serve:

"scripts": {
    "deploy": "serve -s build",
}

And then

npm deploy or yarn deploy

Hope this answer helps you get rid of the error.

For more info refer to here`

This bug has been fixed in the latest version of the release. Click here to see the source file

Answer 5

It's been a while since I was messing around with react, but react-scripts is built on top of webpack if I'm not mistaken, so it most likely use webpack-dev-server to speed up development. It uses websockets in order to communicate to the client to trigger a hot reload when it discovers changes on disk.

You are probably just starting the application in development mode, so if you're deploying it to a production environment, you should run npm run build which would create a set of javascript files that you can serve with your favourite webserver.

Answer 6

Here's a simpler solution. Downgrade your react-scripts to 3.2.0 in your package.json (mine was at 3.3.0).

You may need to delete your package-lock.json and node_modules (rm -rf package-lock.json node_modules), then do a npm i. Commit both your new package.json and package-lock.json to the repo.