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

Simple to solve the issue by three steps

1. set "react-scripts": "3.4.0" at package.json
2. run [npm install]
3. deploy to your host again, here I use an Azure NodeJS App Services https://fila.azurewebsites.net/Location and http://fila.azurewebsites.net/Location

Yes, react-script version 3.2.0 is also ok but react-scripts 3.3.0 only run with http

Good luck Thomas

Answer 2

A lot of answers here do actually solve the issue but the simplest way I have found since I asked this question is to add npm package serve to your dependencies.

yarn add serve or npm i serve

and then replace your start script with the following:

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

This is actually straight out of the create-react-app docs