fixing docker and env

docker-compose.nas.yml

@@ -0,0 +1,62 @@
+services: 
+  frontend:
+    container_name: frontend
+    build:
+      context: ./frontend
+    image: pdelebarre/guitar-tutorial-app-frontend
+    ports:
+      - "3000:80"
+    environment:
+      # Set VITE_API_URL to the internal backend service name inside Docker
+      - VITE_API_URL=http://backend:8080
+    depends_on:
+      - backend
+    networks:
+      - guitartuto-network
+
+  backend:
+    container_name: backend
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    image: pdelebarre/guitar-tutorial-app-backend
+    ports:
+      - "8080:8080"
+    environment:
+      TUTORIALS_PATH: /app/tutorials
+      SPRING_PROFILES_ACTIVE: prod
+      SPRING_DATASOURCE_URL: jdbc:postgresql://postgres:5432/guitardb
+      SPRING_DATASOURCE_USERNAME: myuser
+      SPRING_DATASOURCE_PASSWORD: mypassword
+    volumes:
+      - /volume1/docker/guitar-tutorial/tutorials:/app/tutorials
+    networks:
+      - guitartuto-network
+    depends_on:
+      - postgres
+
+  postgres:
+    image: postgres:17-alpine
+    container_name: postgres
+    environment:
+      POSTGRES_USER: myuser
+      POSTGRES_PASSWORD: mypassword
+      POSTGRES_DB: guitardb
+    ports:
+      - "5433:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    networks:
+      - guitartuto-network
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U myuser -d guitardb"]
+      interval: 10s
+      retries: 5
+      start_period: 5s
+
+networks:
+  guitartuto-network:
+    driver: bridge
+
+volumes:
+  postgres_data:

docker-compose.yml

@@ -27,6 +27,9 @@ services:
       context: ./frontend
     image: pdelebarre/guitar-tutorial-app-frontend
     # :${BUILD_ENV:-dev}
+    environment:
+      - GUITARTUTORIALAPP_API_BASE_URL=$GUITARTUTORIALAPP_API_BASE_URL
+      - GUITARTUTORIALAPP_API_PORT=$GUITARTUTORIALAPP_API_PORT
     ports:
       - "3000:80"
     depends_on:

frontend/.dockerignore

@@ -1 +1,21 @@
- node_modules/
+# Versioning and metadata
+.git
+.gitignore
+.dockerignore
+
+# Build dependencies
+dist
+build
+node_modules
+coverage
+
+# Environment (contains sensitive data)
+.env
+.env.development
+
+# Files not required for production
+.editorconfig
+Dockerfile
+README.md
+tslint.json
+nodemon.json

frontend/.env.development

@@ -1 +1,3 @@
-VITE_API_URL=http://localhost:8080/api
+VITE_API_BASE_URL=http://localhost
+VITE_API_PORT=8080
+VITE_ENVIRONMENT=DEVELOPMENT

frontend/.env.production

@@ -0,0 +1,3 @@
+VITE_API_BASE_URL=GUITARTUTORIALAPP_API_BASE_URL
+VITE_API_PORT=GUITARTUTORIALAPP_API_PORT
+VITE_ENVIRONMENT=PRODUCTION

frontend/Dockerfile

@@ -22,6 +22,11 @@ FROM nginx:alpine
 # Copy the built files from the previous stage to the NGINX web root
 COPY --from=builder /app/dist /usr/share/nginx/html
 
+#shell to be able to catch variables at docker run time
+#https://dev.to/sanjayttg/dynamic-environment-variables-for-dockerized-react-apps-5bc5
+COPY env.sh /docker-entrypoint.d/env.sh
+RUN chmod +x /docker-entrypoint.d/env.sh
+
 # Expose the port NGINX is running on
 EXPOSE 80
 

frontend/env.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+for i in $(env | grep GUITARTUTORIALAPP_)
+do
+    key=$(echo $i | cut -d '=' -f 1)
+    value=$(echo $i | cut -d '=' -f 2-)
+    echo $key=$value
+    # sed All files
+    # find /usr/share/nginx/html -type f -exec sed -i "s|${key}|${value}|g" '{}' +
+
+    # sed JS and CSS only
+    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
+done

frontend/src/api/api.ts

@@ -4,17 +4,17 @@ import axios from "axios";
 
 import { Comment, Playlist } from "../types/types";
 
-// Get the API URL from the environment variable
-export const apiBaseUrl = import.meta.env.VITE_API_URL;
+// Use environment variables for the baseURL
+const apiURL = import.meta.env.VITE_API_BASE_URL;
+const apiPort = import.meta.env.VITE_API_PORT;
 
 // Check if the environment variable is set correctly
-if (!apiBaseUrl) {
+if (!apiURL || !apiPort) {
   throw new Error("VITE_API_URL is not defined. Check your .env file.");
 }
 
-// Create axios instance with base URL
 const api = axios.create({
-  baseURL: apiBaseUrl,
+  baseURL: `${apiURL}:${apiPort}/api`,
 });
 
 // Debugging the axios instance baseURL

frontend/src/vite-env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+declare namespace NodeJS {
+  interface ProcessEnv {
+    VITE_API_BASE_URL: string;
+    VITE_API_PORT: string;
+    // Add other environment variables here if needed
+  }
+}