From 5a1f0f6b398fba0803ef2957c64a9f7a5ca3e2ca Mon Sep 17 00:00:00 2001
From: Gorka <gorkavp@gmail.com>
Date: Sat, 15 Feb 2025 20:43:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Update=20Docker=20configuration?=
 =?UTF-8?q?=20for=20development=20environment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker-compose.override.yml | 20 ++++++++++++++++++--
 frontend/Dockerfile         | 21 +++++++++++++--------
 frontend/vite.config.ts     | 18 +++++++++++++-----
 3 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/docker-compose.override.yml b/docker-compose.override.yml
index 0751abe901..7e240c49b0 100644
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@@ -1,5 +1,4 @@
 services:
-
   # Local services are available on their ports, but also available on:
   # http://api.localhost.tiangolo.com: backend
   # http://dashboard.localhost.tiangolo.com: frontend
@@ -94,13 +93,30 @@ services:
 
   frontend:
     restart: "no"
+    # For development -> "5173:5173"
+    # For production -> "5173:80"
     ports:
-      - "5173:80"
+      - "5173:5173"
     build:
       context: ./frontend
+      # development: use the local Vite server (npm run dev)
+      # production-nginx: use the Nginx server (npm run build)
+      target: development
       args:
         - VITE_API_URL=http://localhost:8000
         - NODE_ENV=development
+    command: npm run dev
+    develop:
+      watch:
+        - path: ./frontend
+          action: sync
+          target: /app
+          ignore:
+            - ./frontend/node_modules
+            - node_modules
+    # volumes:
+    #   - ./frontend:/app
+    #   - /app/node_modules
 
   playwright:
     build:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 8728c7b029..e5b4e2a34a 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,4 +1,4 @@
-# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
+# Build-stage based on Node.js, to build and compile the frontend
 FROM node:20 AS build-stage
 
 WORKDIR /app
@@ -11,13 +11,18 @@ COPY ./ /app/
 
 ARG VITE_API_URL=${VITE_API_URL}
 
-RUN npm run build
+# Development Stage: Used for Live Reload (`npm run dev`)
+FROM build-stage AS development
+# Expose Vite's default port
+EXPOSE 5173
+CMD ["npm", "run", "dev"] 
 
+# Production Stage: Only Used in Production
+FROM build-stage AS production-build
+RUN npm run build 
 
-# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
-FROM nginx:1
-
-COPY --from=build-stage /app/dist/ /usr/share/nginx/html
-
+# Stage based on Nginx, to have only the compiled app, ready for production with Nginx
+FROM nginx:1 as production
+COPY --from=production-build /app/dist/ /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/conf.d/default.conf
-COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf
+COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 572745b8cf..e28ac2b593 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,8 +1,16 @@
-import { TanStackRouterVite } from "@tanstack/router-vite-plugin"
-import react from "@vitejs/plugin-react-swc"
-import { defineConfig } from "vite"
+import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), TanStackRouterVite()],
-})
+	plugins: [react(), TanStackRouterVite()],
+	server: {
+		watch: {
+			usePolling: true,
+		},
+		host: "0.0.0.0", // Allows access from the container
+		port: 5173, // Matches the mapped port in Docker Compose
+		strictPort: true,
+	},
+});