📝 Update Docker configuration for development environment

Author: gorkavp

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:

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

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,
+	},
+});