8 ways to handle environment-specific app settings
Today many web apps are built using React, Angular, Vue, Ember, etc. These modern client-side rendered apps often call web APIs that are hosted on separate servers. This creates a problem: how do you configure your app to call the right API URL in each environment?
For example, during development, you may host the API locally at localhost:3000. In production, the API may be be hosted on some other server at api.mycompany.com. So you need your app to call localhost:3000 in development and api.mycompany.com in production. But how?
And the base URL is just one example of settings that may change per environment. You might choose to tweak other settings per environment for performance, security, or logging purposes. Some of the approaches below are applicable for these general environment-specific configurations as well. But for simplicity, this post focuses on techniques for configuring base URLs per environment.