fix url and ports

docker-compose.yml

@@ -9,8 +9,8 @@ services:
       - "3050:80"
     volumes:
       - ./nginx/nginx.conf:/etc/nginx/nginx.conf
-    networks:
-      - guitartuto-network
+    # networks:
+    #   - guitartuto-network
     depends_on:
       - backend
       - frontend
@@ -25,20 +25,21 @@ services:
       SPRING_PROFILES_ACTIVE: dev
     volumes:
       - /Volumes/LaCie/dev/guitar-tutorial-app/tutorials:/app/tutorials
-    networks:
-      - guitartuto-network
+    # networks:
+    #   - guitartuto-network
     restart: unless-stopped
 
   frontend:
+    stdin_open: true
     image: pdelebarre/guitar-tutorial-app-frontend
     container_name: frontend
-    environment:
-      TUTO_API_URL: http://nginx/api  # Set API URL to go through Nginx
+    # environment:
+    #   TUTO_API_URL: http://nginx/api  # Set API URL to go through Nginx
     # ports:
     #   - "3000:80"  # Uncomment if you want direct access to frontend on port 3000
-    networks:
-      - guitartuto-network
+    # networks:
+    #   - guitartuto-network
 
-networks:
-  guitartuto-network:
-    driver: bridge
+# networks:
+#   guitartuto-network:
+#     driver: bridge

frontend/src/api/api.ts

@@ -22,7 +22,7 @@ import { Comment, Playlist } from "../types/types";
 
 // Fetch list of file names (tutorials) from the backend
 export const getTutorials = async (): Promise<string[]> => {
-  const response = await axios.get("/tutorials/");
+  const response = await axios.get("/api/tutorials/");
   return response.data;
 };
 
@@ -62,7 +62,7 @@ export const getTablatureUrl = async (
 
 // Fetch comments for a specific tutorial
 export const getComments = async (tutorialId: number): Promise<Comment[]> => {
-  const response = await axios.get(`/comments/tutorial/${tutorialId}`);
+  const response = await axios.get(`/api/comments/tutorial/${tutorialId}`);
   return response.data;
 };
 
@@ -71,18 +71,18 @@ export const postComment = async (
   tutorialId: number,
   text: string
 ): Promise<void> => {
-  await axios.post("/comments", { tutorialId, text });
+  await axios.post("/api/comments", { tutorialId, text });
 };
 
 // Fetch all playlists
 export const getPlaylists = async (): Promise<Playlist[]> => {
-  const response = await axios.get("/playlists");
+  const response = await axios.get("/api/playlists");
   return response.data;
 };
 
 // Create a new playlist
 export const createPlaylist = async (name: string): Promise<void> => {
-  await axios.post("/playlists", { name });
+  await axios.post("/api/playlists", { name });
 };
 
 // Post a new annotation (highlight)
@@ -92,7 +92,7 @@ export const postAnnotation = async (
   position: any,
   comment: { text: string; emoji: string }
 ): Promise<void> => {
-  await axios.post("/annotations/", {
+  await axios.post("/api/annotations/", {
     tutorialId,
     content,
     position,
@@ -102,5 +102,5 @@ export const postAnnotation = async (
 
 // Delete an annotation by its ID
 export const deleteAnnotation = async (annotationId: string): Promise<void> => {
-  await axios.delete(`/annotations/${annotationId}`);
+  await axios.delete(`/api/annotations/${annotationId}`);
 };

nginx/nginx.conf

@@ -9,7 +9,7 @@ http {
   # default_type  application/octet-stream;
 
   upstream frontend {
-    server frontend:3000;
+    server frontend:80;
   }
 
   # Configure upstream servers
@@ -21,7 +21,7 @@ http {
     listen 80;
 
     # Route /api requests to the backend service
-    location /api/ {
+    location /api {
       rewrite /api/(.*) /$1 break;
       proxy_pass http://backend;
       proxy_set_header Host $host;
@@ -30,6 +30,13 @@ http {
       proxy_set_header X-Forwarded-Proto $scheme;
     }
 
+    location /sockjs-node {
+        proxy_pass http://frontend;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+    }
+
     # Serve frontend for all other routes
     location / {
       proxy_pass http://frontend;