Used wss instead of ws.

os-league-tools-dev.service

@@ -13,6 +13,10 @@ WorkingDirectory=/home/sonder/leagues-tools-dev/os-league-tools-master
 Environment="NODE_ENV=development"
 Environment="PORT=3001"
 Environment="HOST=0.0.0.0"
+# WebSocket config for hot reload through reverse proxy
+Environment="WDS_SOCKET_PROTOCOL=wss"
+Environment="WDS_SOCKET_HOST=dev.leagues.tools"
+Environment="WDS_SOCKET_PORT=443"
 
 # Start the dev server with hot reload
 ExecStart=/usr/bin/npm run dev

os-league-tools-master/config/webpackDevServer.config.js

@@ -10,6 +10,7 @@ const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
+const sockProtocol = process.env.WDS_SOCKET_PROTOCOL;
 
 module.exports = function (proxy, allowedHost) {
   const disableFirewall = !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
@@ -71,6 +72,7 @@ module.exports = function (proxy, allowedHost) {
         // Enable custom sockjs pathname for websocket connection to hot reloading server.
         // Enable custom sockjs hostname, pathname and port for websocket connection
         // to hot reloading server.
+        protocol: sockProtocol,
         hostname: sockHost,
         pathname: sockPath,
         port: sockPort,