create-react-app code changes behind nginx reverse proxy not reloading in browser

Question

Ive installed a new CRA template and Im unable to see file changes reflect in the browser. Im reverse proxying React app through nginx using unmodfied CRA installation (unmodified apart from setting .env VAR PORT corresponding to standard nginx websocket proxy config). Still I see persistent browser error:

webpackHotDevClient.js:60 WebSocket connection to 'wss://react.syntapse.co.uk/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 301

.env file

PORT=3121

nginx configuration

server {
    listen 80;
    server_name react.syntapse.co.uk;

    location /sockjs-node/ {
        proxy_pass http://0.0.0.0:3121/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location / {
        proxy_pass http://0.0.0.0:3121/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

I haven;t taken any specific steps to enable HMR or any form of hot reloading just expecting code changes to update in the browser. I'm trying out different platforms and ive got near identical nginx config for default angular and vue apps which just work with HMR out the box so I guess React config needs tweaking to work with through proxy but the documentation is a bit sparse.

Any help or insights into using React with nginx reverse proxy are much appreciated.

Thanks

Answer 1

Answer in plain sight the whole time! drop the end slash.

location /sockjs-node {
    proxy_pass http://0.0.0.0:3121/sockjs-node;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}