What’s the Best Way to Handle Configuration Variables in React Apps?

Yeah, try not to include secrets in your React build because anything in the frontend will be exposed. A common practice is to use build-time environment variables for non-sensitive config, like API URLs, while keeping real secrets on the backend. Your vault concept is good, but make sure the frontend accesses it through a backend proxy; otherwise, you might just end up exposing everything again.

I think the second approach you mentioned, like using a deployment vault, is more practical. It's best to keep mutable information separate from your main product to reduce risk. Using CI variables or an external database for sensitive info is the way to go.

You definitely want to avoid putting configuration variables, especially secrets, in your React build. That's a huge security risk! Instead, use environment variables at runtime with tools like Kubernetes for orchestration. This keeps your sensitive information safe and avoids hardcoding anything in your frontend app.

This issue pops up frequently with React apps. The build-time environment variable approach can get messy, especially as your environments and configurations evolve. If you embed everything in at build time, you find yourself needing to rebuild the app for every small config change, which can really slow down deployments. A better practice is to bake your app once and inject configurations at runtime, either through serving a config.json file from the backend or using a global variable in your index.html. This method made a significant difference in my project, halving deployment times while simplifying the CI/CD process.