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:
42
README.md
42
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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user