One post tagged with "nginx"

At some point in almost every React + Vite project, someone drops the backend URL into a VITE_API_URL env var and moves on. It works, the demo passes, nobody thinks about it again. Then a few months later you're staring at your own production bundle in DevTools and your internal API host is sitting right there in plain text for anyone to read.

There's a cleaner way to do this, and it's the approach we standardize on. The frontend only ever calls same-origin relative paths under a single prefix: /api. The real backend, storage, and WebSocket hosts stay in a proxy layer (Vite's dev server while you're developing, nginx or Caddy or a CDN in production) and never make it into the JS that ships to the browser. This post walks through how to set that up and the mistakes to watch for.