From 444dbe44583d10d85a566aa823ef8356bf3d6a14 Mon Sep 17 00:00:00 2001
From: Ryan Chen <ryan@torrtle.co>
Date: Mon, 12 Jan 2026 21:13:21 -0500
Subject: [PATCH] port

---
 .env.example                     |  3 +++
 CLAUDE.md                        | 10 ++++++++--
 Dockerfile.frontend              |  6 +++++-
 docker-compose.yml               |  3 ++-
 frontend/frontend/vite.config.js |  5 ++++-
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/.env.example b/.env.example
index 2b5f671..34eec7e 100644
--- a/.env.example
+++ b/.env.example
@@ -16,5 +16,8 @@ OIDC_REDIRECT_URI=http://localhost:5001/api/auth/callback
 # Frontend URL for callbacks
 FRONTEND_URL=http://localhost:3000
 
+# Frontend port (defaults to 3000 if not set)
+# FRONTEND_PORT=3000
+
 # Cookie security (set to 'true' in production with HTTPS)
 SESSION_COOKIE_SECURE=false
diff --git a/CLAUDE.md b/CLAUDE.md
index 1a60005..6763804 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -49,7 +49,10 @@ cd frontend/frontend  # Note the nested directory
 npm install
 
 # Run frontend dev server (with proxy to backend)
-npm run dev  # Runs on port 3000
+npm run dev  # Runs on port 3000 by default
+
+# Run on custom port
+PORT=4000 npm run dev
 
 # Build for production (outputs to backend/static/)
 npm run build
@@ -87,11 +90,14 @@ docker compose up --build
 # Run database migrations inside container
 docker compose exec backend uv run flask db migrate -m "Description"
 docker compose exec backend uv run flask db upgrade
+
+# Use custom frontend port (defaults to 3000)
+FRONTEND_PORT=4000 docker compose up
 ```
 
 **Services:**
 - Backend: http://localhost:5001 (Flask + SocketIO)
-- Frontend: http://localhost:3000 (Vite dev server)
+- Frontend: http://localhost:3000 (Vite dev server, configurable via `FRONTEND_PORT` env var)
 
 **Hot Reload:**
 - Backend: Changes to `backend/`, `main.py`, and `migrations/` automatically reload Flask
diff --git a/Dockerfile.frontend b/Dockerfile.frontend
index 6b6ec2f..e8eb439 100644
--- a/Dockerfile.frontend
+++ b/Dockerfile.frontend
@@ -11,8 +11,12 @@ RUN npm install
 # Copy application code
 COPY frontend/frontend ./
 
+# Default port (can be overridden via environment variable)
+ARG PORT=3000
+ENV PORT=${PORT}
+
 # Expose Vite dev server port
-EXPOSE 3000
+EXPOSE ${PORT}
 
 # Run dev server with host 0.0.0.0 to allow access from outside container
 CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
diff --git a/docker-compose.yml b/docker-compose.yml
index 58739ef..effd527 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -96,8 +96,9 @@ services:
       context: .
       dockerfile: Dockerfile.frontend
     ports:
-      - "3000:3000"
+      - "${FRONTEND_PORT:-3000}:${FRONTEND_PORT:-3000}"
     environment:
+      - PORT=${FRONTEND_PORT:-3000}
       - VITE_BACKEND_URL=http://backend:5001
       # OIDC configuration
       - VITE_OIDC_AUTHORITY=${OIDC_ISSUER}
diff --git a/frontend/frontend/vite.config.js b/frontend/frontend/vite.config.js
index 55748b6..5cd3a2c 100644
--- a/frontend/frontend/vite.config.js
+++ b/frontend/frontend/vite.config.js
@@ -4,11 +4,14 @@ import react from "@vitejs/plugin-react";
 // Use environment variable for backend URL, default to localhost for local dev
 const backendUrl = process.env.VITE_BACKEND_URL || "http://localhost:5001";
 
+// Use environment variable for frontend port, default to 3000
+const frontendPort = parseInt(process.env.PORT || process.env.VITE_PORT || "3000", 10);
+
 // https://vite.dev/config/
 export default defineConfig({
 	plugins: [react()],
 	server: {
-		port: 3000,
+		port: frontendPort,
 		host: "0.0.0.0",
 		proxy: {
 			"/api": {