From afe150f15c46e9a50976b539bf81c55d27673683 Mon Sep 17 00:00:00 2001
From: Joerg <joerg@dj7nt.de>
Date: Fri, 16 Jan 2026 08:16:58 +0100
Subject: [PATCH] Add proxy configuration for single-port development

Configure SvelteKit dev server to proxy API requests to Elysia backend,
allowing users to access the application on a single port (5173).

## Changes
- Add proxy config to vite.config.js for /api requests
- Update API client to use relative URLs (/api)
- Add convenience 'dev' script to start both servers
- Update README with single-port instructions
- Add architecture section explaining proxy setup

Benefits:
- Single port to access (5173)
- HMR still works for frontend
- No CORS issues
- Backend runs hidden on port 3001

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 README.md                   | 42 +++++++++++++++++++++++++------------
 package.json                |  1 +
 src/frontend/src/lib/api.js |  5 +++--
 src/frontend/vite.config.js |  8 +++++++
 4 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 92abec2..d3aab0d 100644
--- a/README.md
+++ b/README.md
@@ -104,28 +104,25 @@ This creates the SQLite database with required tables (users, qsos, sync_jobs).
 
 ## Running the Application
 
-Start both backend and frontend:
+Start both backend and frontend with a single command:
 
 ```bash
-# Start backend (port 3001)
-bun run backend/index.js
-
-# Start frontend (port 5173)
-cd src/frontend && bun run dev
+bun run dev
 ```
 
-Or use the convenience scripts:
+Or start them individually:
 ```bash
-# Backend only
-bun run backend
+# Backend only (port 3001, proxied)
+bun run dev:backend
 
-# Frontend only
-bun run frontend
+# Frontend only (port 5173)
+bun run dev:frontend
 ```
 
 The application will be available at:
-- Frontend: http://localhost:5173
-- Backend API: http://localhost:3001
+- **Frontend & API**: http://localhost:5173
+
+**Note**: During development, both servers run (frontend on 5173, backend on 3001), but API requests are automatically proxied through the frontend. You only need to access port 5173.
 
 ## API Endpoints
 
@@ -201,6 +198,25 @@ CREATE TABLE sync_jobs (
 );
 ```
 
+## Architecture
+
+### Development Mode
+- **SvelteKit Dev Server** (port 5173): Serves frontend and proxies API requests
+- **Elysia Backend** (port 3001): Handles API requests (hidden from user)
+- **Proxy Configuration**: All `/api/*` requests are forwarded from SvelteKit to Elysia
+
+This gives you:
+- ✅ Single port to access (5173)
+- ✅ Hot Module Replacement (HMR) for frontend
+- ✅ No CORS issues
+- ✅ Simple production deployment
+
+### Production Mode
+In production, you can either:
+1. **Build static files** and serve from Elysia
+2. **Keep the proxy setup** with a proper reverse proxy (nginx, caddy)
+3. **Use SvelteKit adapter** for Node/Bun to serve everything from one process
+
 ## Features in Detail
 
 ### Background Job Queue
diff --git a/package.json b/package.json
index 7bda0b8..b316242 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "type": "module",
   "private": true,
   "scripts": {
+    "dev": "bun run src/backend/index.js & cd src/frontend && bun run dev",
     "dev:backend": "bun run src/backend/index.js",
     "dev:frontend": "cd src/frontend && bun run dev",
     "db:generate": "drizzle-kit generate",
diff --git a/src/frontend/src/lib/api.js b/src/frontend/src/lib/api.js
index dd074c6..7208c3a 100644
--- a/src/frontend/src/lib/api.js
+++ b/src/frontend/src/lib/api.js
@@ -1,9 +1,10 @@
 import { browser } from '$app/environment';
 
 /**
- * API base URL - change this to match your backend
+ * API base URL - proxied through SvelteKit dev server
+ * In production, this will be relative to the same origin
  */
-const API_BASE = 'http://localhost:3001/api';
+const API_BASE = '/api';
 
 /**
  * Make an API request
diff --git a/src/frontend/vite.config.js b/src/frontend/vite.config.js
index 7996a52..3dd6b09 100644
--- a/src/frontend/vite.config.js
+++ b/src/frontend/vite.config.js
@@ -38,6 +38,14 @@ export default defineConfig({
 		// Disable error overlay to dismiss URI malformed errors
 		hmr: {
 			overlay: false
+		},
+		// Proxy API requests to backend
+		proxy: {
+			'/api': {
+				target: 'http://localhost:3001',
+				changeOrigin: true,
+				secure: false,
+			}
 		}
 	}
 });