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
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