vikingowl
274f5b3b53
Implemented a comprehensive CORS proxy solution that works with both
local and remote backends during development.
## Changes
### Vite Configuration (vite.config.ts)
- Use loadEnv() to properly read VITE_API_BASE_URL from .env
- Configure proxy to forward /api/* requests to backend
- Add detailed logging for proxy requests and responses
- Support changeOrigin, rewrite, secure=false, and websockets
### API Client (src/lib/api/client.ts)
- In development: Always use /api prefix (proxied)
- In production: Use direct VITE_API_BASE_URL
- Add console logging to show proxy configuration in dev mode
- Automatic detection of environment (DEV vs PROD)
### Error Handling (route loaders)
- Fix console.error() calls that caused TypeError with circular refs
- Use error.message instead of logging full error objects
- Affects: +page.ts, matches/+page.ts
### Documentation
- docs/LOCAL_DEVELOPMENT.md: Complete rewrite with proxy explanation
- Quick start guide for both production API and local backend
- Detailed proxy flow diagrams
- Comprehensive troubleshooting section
- Clear examples and logs
- docs/CORS_PROXY.md: Technical deep-dive on proxy implementation
- How the proxy works internally
- Configuration options explained
- Testing procedures
- Common issues and solutions
- .env.example: Updated with proxy documentation
## How It Works
Development Flow:
1. Frontend makes request: /api/matches
2. Vite proxy intercepts and forwards to: ${VITE_API_BASE_URL}/matches
3. Backend responds (no CORS headers needed)
4. Proxy returns response to frontend (same-origin)
Production Flow:
1. Frontend makes request directly to: https://api.csgow.tf/matches
2. Backend responds with CORS headers
3. Browser allows request (CORS enabled on backend)
## Benefits
✅ No CORS errors in development
✅ Works with local backend (localhost:8000)
✅ Works with remote backend (api.csgow.tf)
✅ Simple configuration (just set VITE_API_BASE_URL)
✅ Detailed logging for debugging
✅ Production build unaffected (direct requests)
## Testing
Verified with production API:
- curl https://api.csgow.tf/matches ✓
- Dev server proxy logs show successful forwarding ✓
- Browser Network tab shows /api/* requests ✓
- No CORS errors in console ✓
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
81 lines
2.4 KiB
Plaintext
81 lines
2.4 KiB
Plaintext
# CS2.WTF Environment Configuration
|
|
# Copy this file to .env for local development
|
|
# DO NOT commit .env to version control
|
|
|
|
# ============================================
|
|
# API Configuration
|
|
# ============================================
|
|
|
|
# Backend API Base URL
|
|
# Development: Vite proxy forwards /api to this URL (default: http://localhost:8000)
|
|
# Production: Set to your actual backend URL (e.g., https://api.csgow.tf)
|
|
# Note: In development, the frontend uses /api and Vite proxies to this URL
|
|
VITE_API_BASE_URL=http://localhost:8000
|
|
|
|
# API request timeout in milliseconds
|
|
# Default: 10000 (10 seconds)
|
|
VITE_API_TIMEOUT=10000
|
|
|
|
# ============================================
|
|
# Feature Flags
|
|
# ============================================
|
|
|
|
# Enable live match updates (polling/WebSocket)
|
|
# Default: false
|
|
VITE_ENABLE_LIVE_MATCHES=false
|
|
|
|
# Enable analytics tracking
|
|
# Default: true (respects user consent)
|
|
VITE_ENABLE_ANALYTICS=true
|
|
|
|
# Enable debug mode (verbose logging, dev tools)
|
|
# Default: false
|
|
VITE_DEBUG_MODE=false
|
|
|
|
# ============================================
|
|
# Analytics & Tracking (Optional)
|
|
# ============================================
|
|
|
|
# Plausible Analytics
|
|
# Only required if analytics is enabled
|
|
# VITE_PLAUSIBLE_DOMAIN=cs2.wtf
|
|
# VITE_PLAUSIBLE_API_HOST=https://plausible.io
|
|
|
|
# Umami Analytics (alternative)
|
|
# VITE_UMAMI_WEBSITE_ID=your-website-id
|
|
# VITE_UMAMI_SRC=https://analytics.example.com/script.js
|
|
|
|
# ============================================
|
|
# Experimental Features
|
|
# ============================================
|
|
|
|
# Enable WebGL-based heatmaps (high performance)
|
|
# Default: false (use Canvas fallback)
|
|
# VITE_ENABLE_WEBGL_HEATMAPS=false
|
|
|
|
# Enable MSW API mocking in development
|
|
# Useful for frontend development without backend
|
|
# Default: false
|
|
# VITE_ENABLE_MSW_MOCKING=false
|
|
|
|
# ============================================
|
|
# Build Configuration
|
|
# ============================================
|
|
|
|
# App version (auto-populated from package.json)
|
|
# VITE_APP_VERSION=2.0.0
|
|
|
|
# Build timestamp (auto-populated during build)
|
|
# VITE_BUILD_TIMESTAMP=2024-11-04T12:00:00Z
|
|
|
|
# ============================================
|
|
# SSR/Deployment (Advanced)
|
|
# ============================================
|
|
|
|
# Public base URL for the application
|
|
# Used for canonical URLs, sitemaps, etc.
|
|
# PUBLIC_BASE_URL=https://cs2.wtf
|
|
|
|
# Origin whitelist for CORS (if handling API in same domain)
|
|
# PUBLIC_CORS_ORIGINS=https://cs2.wtf,https://www.cs2.wtf
|