Getting websocket error message without using any websocket in react

Question

I am making a simple REST API based Express-React-Node-MySQL stack.

Architecture

1. Client - React JS / Mui client files
2. Server - Node - MySQL - Express framework
3. Ubuntu

Network

1. PORT 443 forwarding ie all requests made on https://myIp:443 or http://myIP:443 land to my home.
2. Yes I have a domain ie https://www.example.in or https://example.in
3. Using Cloudflare to manage domain traffic.

As you may know cloudflare only accepts port 443, 2053, 2083 etc as secure https ports, I was forced to change reactjs default port from 3000 to 2053, as linux does not allow ports below 1000 to be used by non root user. In my machine i have configured that, all requests made to port to 443 from outside are redirected to port 2053.

Traffic Sequence

https://example.in -> https://myIP:443 -> redirect -> https://myIP:2053.

Client Architecture

Now by default, react js fires up the localhost as soon as you enter npm start on http://localhost:3000 . I had to change this to https://localhost:2053 because of the reasons mentioned above.

How I am doing that?

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:2083",
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
    "@fortawesome/free-regular-svg-icons": "^6.0.0-beta3",
    "@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.2.7",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "js-cookie": "^3.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-google-recaptcha-v3": "^1.9.7",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "recaptcha-v3": "^1.10.0",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "HTTPS=true PORT=2053 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

this line = > "start": "HTTPS=true PORT=2053 react-scripts start",

Now lets come to what goes wrong.

This happens in the browser console when I fire up my client/reactjs.

I am not using any websocket or socket io kind of thing, why is this error console message being triggered? What am I doing wrong. PLZ tell:(

Answer 1

This is a great question! Thanks for sharing

To the point: the docs clearly states that

The proxy option supports HTTP, HTTPS and WebSocket connections.

And also that:

If the proxy option is not flexible enough for you, alternatively you can:

Configure the proxy yourself

I know.. this is not such a great option but - using this option is production is not ideal either. Most chances that your app will be served via a real server or via API gateway with a fixed address or a valid domain

Also note that if you are using a secured connection you will also need to manage a valid certificate (or use a manage solution that will provide one)

In short: production and development have different configuration set, hence - in production you will use different config and this error will not be present. This error is likely generated only in development mode using this specific configuration

I hope that satisfy you as the rest of this answer will be more devOps regarding to production configuration rather than development guidelines