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
|
## 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
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user