I am building a multi-tenant React application where the customers will be able to download the application files and run the application in their environment. It is essentially a single application deployed in customer infrastructure (which is not in our control). I am using create-react-app.

What I am struggling with is to find a way wherein each customer can specify configuration parameters based on their environment. For example, let's say there is a parameter in my application called ApiEndpoint. Now this will vary for each customer as they will be hosting the API in their environment as well. How can a customer specify a value for this parameter for their environment that can be read by the application?

At first I thought that I would be able to make use of environment variables where each customer will be able to create a .env file and have my application read from that. However when I read the documentation, I realized that it will not work as .env file gets included in the bundle itself.

Another thought I have is to create a configuration file (say app.config) in the root of the deployed web application. Customers will be able to provide configuration specific to their environment in that file and when my application loads, I will read the contents of this file and populate my application variables accordingly.

I think the configuration file solution will work. However I am curious to know how other folks are solving this problem.