random-lol/PROXY.md

Proxy Configuration

This project uses a proxy to avoid CORS issues when fetching champion data from the Meraki Analytics CDN.

Architecture

Development (ng serve)

• Uses proxy.conf.json configuration
• Angular CLI dev server handles the proxy
• Requests to /api/champions are forwarded to the external CDN

Production/SSR (ng build + npm run serve:ssr:random-lol)

• Uses http-proxy-middleware in src/server.ts
• Express server handles the proxy
• Same endpoint /api/champions works consistently

How It Works

1. Frontend makes a request to /api/champions (relative URL)
2. Proxy layer (dev server or Express) intercepts the request
3. External API at https://cdn.merakianalytics.com/riot/lol/resources/latest/en-US/champions.json is called
4. Response is returned to the frontend as if it came from the same origin

Benefits

• ✅ No CORS issues in development or production
• ✅ Consistent API endpoint across environments
• ✅ External API URL changes only need updates in proxy config
• ✅ Can add caching, rate limiting, or other middleware later

Testing

Development

npm start
# Visit http://localhost:4200

Production SSR

npm run build
npm run serve:ssr:random-lol
# Visit http://localhost:4000

Configuration Files

• proxy.conf.json - Development proxy configuration
• src/server.ts - Production SSR proxy implementation
• angular.json - References proxy config for ng serve