title: React "SecurityError: The operation is insecure." because of webpackHotDevClient in production?
body: <p>I was in the process of deploying my very first React app to a custom set-up DigitalOcean droplet running Debian 10.
  I serve (or at least try to) via nginx proxy that is fed by npm start process using pm2.</p>
  
  <p>For production build:</p>
  
  <pre><code>npm run build
  </code></pre>
  
  <p>I started the server using</p>
  
  <pre><code>pm2 start npm -- start
  </code></pre>
  
  <p>Nginx is all up and running and can serve plain HTML files without a problem. HTTPS also works as it should.</p>
  
  <p>Nginx server conf for HTTPS (in case it does matter):</p>
  
  <pre><code>server {
  root /root/react-app-name;
  index index.html;
  
  server_name mysecretdomain.com www.mysecretdomain.com;
  
  location / {
      proxy_pass http://localhost:3000;
      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;
  }
  
  listen [::]:443 ssl ipv6only=on; # managed by Certbot
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/mysecretdomain.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/mysecretdomain.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
  
  access_log /var/log/nginx/mysecretdomain.com.access.log;
  error_log /var/log/nginx/mysecretdomain.com.error.log;
  }
  </code></pre>
  
  <p>Nginx conf for HTTP (in case it does matter):</p>
  
  <pre><code>server {
  if ($host = www.mysecretdomain.com) {
      return 301 https://$host$request_uri;
  }
  
  
  if ($host = mysecretdomain.com) {
      return 301 https://$host$request_uri;
  }
  
  listen 80;
  listen [::]:80;
  
  server_name mysecretdomain.com www.mysecretdomain.com;
  
  return 404; # managed by Certbot
  }
  </code></pre>
  
  <p>Then I ran into the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/UMkQJ.jpg" rel="noreferrer">FireFox SecurityError 1</a></p>
  
  <p><a href="https://i.stack.imgur.com/x2JXo.jpg" rel="noreferrer">FireFox SecurityError 2</a></p>
  
  <p>Most of the answers I read only deal with it by changing a setting under about:config, but I also get an error message saying <strong>"SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS."</strong> in Chrome and on any other devices/browsers I've tried.
  So it is safe to say that it is NOT client-side.</p>
  
  <p>I suppose it has to do with the <em>webpackHotDevClient</em> and that, for some reason, I still appear to be in development mode. I thought the build was supposed to be for production already?</p>
  
  <p>Thank you for any advice.</p>