import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// Ports are read from .env so two branch checkouts can run `npm run dev` side by
// side: give each folder its own WEB_PORT (Vite) and PORT (API). The /api proxy
// follows PORT so the web server always talks to its own backend.
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  const webPort = Number(env.WEB_PORT || 5173)
  const apiPort = Number(env.PORT || 8787)
  return {
    plugins: [react()],
    server: {
      port: webPort,
      strictPort: true, // fail loudly on a clash instead of silently picking another port
      proxy: { '/api': `http://127.0.0.1:${apiPort}` },
    },
  }
})