Fix deployment

Dockerfile

@@ -1,13 +1,13 @@
 FROM node:20-alpine as builder
 WORKDIR /app
 COPY . .
-ARG VITE_APP_BACKEND_ADDRESS
+ARG VITE_SOCKET_URL
-ENV VITE_APP_BACKEND_ADDRESS $VITE_APP_BACKEND_ADDRESS
+ENV VITE_SOCKET_URL $VITE_SOCKET_URL
 RUN npm install
 RUN npm run build
 
 FROM nginx:1.25.4-alpine-slim as prod
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY nginx.conf  /etc/nginx/conf.d
-EXPOSE 3000
+EXPOSE 5173
 CMD ["nginx", "-g", "daemon off;"]

Jenkinsfile

@@ -4,13 +4,14 @@ pipeline {
     environment {
         IMAGE_NAME = "darkbird/minesweeper-frontend:latest"
         REGISTRY_IMAGE_NAME = "registry.xdarkbird.duckdns.org/darkbird/minesweeper-frontend:latest"
+        VITE_SOCKET_URL = "http://minesweeper-backend.darkbird.es"
     }
 
     stages {
         stage('Docker build') {
             steps {
                 sh """
-                    docker build --build-arg VITE_SOCKET_URL=http://minesweeper-backend.darkbird.es --network="host" -t ${IMAGE_NAME} .
+                    docker build --build-arg VITE_SOCKET_URL=${VITE_SOCKET_URL} --network="host" -t ${IMAGE_NAME} .
                 """
             }
         }

nginx.conf

@@ -1,5 +1,5 @@
 server {
-    listen 3000;
+    listen 5173;
     root   /usr/share/nginx/html;
     index  index.html;
     etag on;

src/App.jsx

@@ -7,20 +7,39 @@ import Game from './components/Game';
 const App = () => {
   const [room, setRoom] = useState({});
 
+  useEffect(() => {
+    console.log("Attempting to connect socket");
+    socket.connect();
+
+    const cleanup = setupSocketEffect(socket, (room) => {
+      console.log("Room state updated", room);
+      setRoom(room);
+    });
+
+    return () => {
+      cleanup();
+      socket.disconnect();
+    };
+  }, []);
+
   useEffect(() => setupSocketEffect(socket, setRoom), []);
 
   const handleDisconnect = () => {
+    console.log('Disconnecting');
     socket.disconnect();
   }
 
   const handleJoinRoom = (username, room) => {
+    console.log('Joining room', room);
     socket.connect();
     socket.emit('joinRoom', { username, room });
   }
 
   const handleCreateRoom = (username, rows, cols, bombs, autoflag, gameMode) => {
+    console.log('Creating room', { username, rows, cols, bombs, autoflag, gameMode });
     socket.connect();
     socket.emit('createRoom', { username, rows, cols, bombs, autoflag, gameMode });
+    console.log(socket);
   };
 
   const handleTileClick = (tileId) => {

src/socket.js

@@ -1,56 +1,76 @@
-import { io } from 'socket.io-client';
+import { io } from "socket.io-client";
 
-const URL = 'http://192.168.0.134:5174';
+const URL = import.meta.env.VITE_SOCKET_URL || "http://minesweeper-backend.darkbird.es:5174";
-console.log('Backend URL', URL);
+console.log("Backend URL", URL);
 export const socket = io(URL, {
   autoConnect: false,
-  transports: ['websocket'],
+  transports: ["websocket"],
   withCredentials: true,
 });
 
+socket.on("connect_error", (err) => {
+  console.error("Connection error", err);
+});
+
+socket.on("connect", () => {
+  console.log("Socket connected");
+});
+
+socket.on("disconnect", () => {
+  console.log("Socket disconnected");
+});
+
 export const setupSocketEffect = (socket, setRoom) => {
+  console.log("Setting up socket effect", socket, setRoom);
+
   const socketHandlers = [
     {
-      event: 'connect',
+      event: "connect",
       handler: () => {
+        console.log("Socket connected");
       }
     },
     {
-      event: 'disconnect',
+      event: "disconnect",
       handler: () => {
+        console.log("Socket disconnected");
         setRoom(null);
       }
     },
     {
-      event: 'error',
+      event: "error",
       handler: (error) => {
-        console.error(error);
+        console.error("Socket error", error);
       }
     },
     {
-      event: 'youJoinedRoom',
+      event: "youJoinedRoom",
       handler: (data) => {
+        console.log("Joined room", data);
         setRoom({ ...data });
       }
     },
     {
-      event: 'roomUserJoined',
+      event: "roomUserJoined",
       handler: (data) => {
+        console.log("User joined room", data);
         setRoom({ ...data });
       }
     },
     {
-      event: 'roomUserLeft',
+      event: "roomUserLeft",
       handler: (data) => {
+        console.log("User left room", data);
         setRoom({ ...data });
       }
     },
     {
-      event: 'updateRoom',
+      event: "updateRoom",
       handler: (data) => {
+        console.log("Room updated", data);
         setRoom({ ...data });
       }
-    }
+    },
   ];
 
   socketHandlers.forEach(({ event, handler }) => {

vite.config.js

@@ -7,7 +7,7 @@ export default defineConfig(({ command, mode }) => {
  return {
    plugins: [react()],
    server: {
-     port: 3000,
+     port: 5173,
      host: true,
      watch: {
       usePolling: true,