🔧 Passing just the hostname and not port

docker-compose.yml

@@ -9,7 +9,7 @@ services:
     container_name: threetwo-ui
     env_file: ./docker-compose.env
     environment:
-      DOCKER_SOCKET_HOST: $HOSTNAME
+      DOCKER_HOST: $HOSTNAME
     restart: unless-stopped
     labels:
       - "traefik.enable=true"

src/client/context/socket/socket.context.tsx

@@ -8,7 +8,7 @@ import { success } from "react-notification-system-redux";
 const WebSocketContext = createContext(null);
 export const WebSocketProvider = ({ children }): ReactElement => {
   const dispatch = useDispatch();
-  const socketHost = process.env.DOCKER_SOCKET_HOST || SOCKET_BASE_URI;
+  const socketHost = `${process.env.DOCKER_HOST}:8051` || SOCKET_BASE_URI;
   const socket: Socket = io(socketHost);
 
   socket.on("connect", () => {

webpack.config.js

@@ -91,9 +91,7 @@ module.exports = (env) => {
         title: "express-typescript-react",
       }),
       new webpack.DefinePlugin({
-        "process.env.DOCKER_SOCKET_HOST": JSON.stringify(
-          process.env.DOCKER_SOCKET_HOST,
-        ),
+        "process.env.DOCKER_HOST": JSON.stringify(process.env.DOCKER_HOST),
       }),
       new MiniCssExtractPlugin({
         filename: "./css/[name].css",