DEV Community

Discussion on: How to manage Local vs Dev vs Prod settings/configs in React?

kspeakman profile image
Kasey Speakman • Edited on

Like you, I am currently searching for this answer.

I have used some of the suggested solutions already. I created different .env files. This still requires your code to have different build branches based on target environment. The built-for-production code is not portable between staging and production environments, for example. You would have to build again for staging.

What I wish for is something like config with 12-factor apps. I can build a backend service that can run in dev or staging or production without modification. Because the configuration comes from the running machine's environment vars instead of something that gets packaged into the app on build.

The only way I can think of to accomplish something like this with JS is to fetch a config file as the app's first action. It would need to call a separate configuration service that returns different configs depending on who is asking (e.g. Origin header). That feels like it misses the point a bit, but is probably closest to creating environment-portable apps.

🔔 Never put secrets in front-end code. Front-end web code, along with any included secrets, is directly viewable from the browser. Usually APIs designed for front-end use have a "public" key for that purpose. Otherwise use standard auth mechanism (session cookies or JWT) to make a request to your own backend. Then let your backend deal with the "secret" stuff. Although, mobile may actually have reasonable secret storage. I'm less familiar with that.

🔔 Don't depend on .gitignore to keep you from checking in secrets. It is easy to accidentally check in ignored files. If you put them anywhere inside your repo folder, they are vulnerable to being accidentally disclosed.