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>
This commit is contained in:
2026-01-16 08:16:58 +01:00
parent d959235cdd
commit afe150f15c
4 changed files with 41 additions and 15 deletions

View File

@@ -104,28 +104,25 @@ This creates the SQLite database with required tables (users, qsos, sync_jobs).
## Running the Application ## Running the Application
Start both backend and frontend: Start both backend and frontend with a single command:
```bash ```bash
# Start backend (port 3001) bun run dev
bun run backend/index.js
# Start frontend (port 5173)
cd src/frontend && bun run dev
``` ```
Or use the convenience scripts: Or start them individually:
```bash ```bash
# Backend only # Backend only (port 3001, proxied)
bun run backend bun run dev:backend
# Frontend only # Frontend only (port 5173)
bun run frontend bun run dev:frontend
``` ```
The application will be available at: The application will be available at:
- Frontend: http://localhost:5173 - **Frontend & API**: http://localhost:5173
- Backend API: http://localhost:3001
**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 ## 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 ## Features in Detail
### Background Job Queue ### Background Job Queue

View File

@@ -4,6 +4,7 @@
"type": "module", "type": "module",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "bun run src/backend/index.js & cd src/frontend && bun run dev",
"dev:backend": "bun run src/backend/index.js", "dev:backend": "bun run src/backend/index.js",
"dev:frontend": "cd src/frontend && bun run dev", "dev:frontend": "cd src/frontend && bun run dev",
"db:generate": "drizzle-kit generate", "db:generate": "drizzle-kit generate",

View File

@@ -1,9 +1,10 @@
import { browser } from '$app/environment'; 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 * Make an API request

View File

@@ -38,6 +38,14 @@ export default defineConfig({
// Disable error overlay to dismiss URI malformed errors // Disable error overlay to dismiss URI malformed errors
hmr: { hmr: {
overlay: false overlay: false
},
// Proxy API requests to backend
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
secure: false,
}
} }
} }
}); });