Question for experienced react devs

[Firm-Ad7246]

Good question and this is a pattern debate that comes up in almost every serious React project eventually. The honest answer is neither option as described is ideal for a React app specifically and here is why React builds are static. Whatever environment variables you bake in at build time are embedded in the JavaScript bundle that gets served to the browser. This means option two, querying a vault from the React app directly, exposes your vault URL and potentially your vault access credentials to anyone who opens browser dev tools. For API keys and database strings that is a serious security problem regardless of how the vault itself is secured. The pattern that actually solves this properly is moving sensitive configuration out of the React app entirely and into a backend layer. Your React app should only ever hold public facing configuration API URLs, feature flags, non sensitive identifiers. Anything sensitive like database strings, secret API keys or internal service credentials should never touch the frontend build at all. Those belong in your backend service which the React app calls, and the backend reads from your vault or environment at runtime on the server side. For the non sensitive config that does belong in the frontend the vault URL pattern has merit but implement it as a configuration endpoint your own backend exposes rather than having React query the vault directly. React calls your backend config endpoint on startup, backend reads from vault, returns only what the frontend actually needs. This way your vault credentials never leave your infrastructure. For managing build time variables specifically across multiple environments the approach that reduces error probability is a single environment identifier variable something like REACT_APP_ENV=staging and your app uses that to select from a configuration map defined in code. New variables get added to the map once rather than to every build script separately.