I have a React app with fetches from an API in it. I have a dockerfile that works.
How do I configure the base url for all fetches in production?
In the end I will deploy my React app on Azure App Services.
I used the tag proxy in package.json, but this is only for development.
An Example fetch looks like this: (before "/evaluations" the base url has to be placed)
fetch(`/evaluations?onlyactiveones=true`, this.credentials)
.then(response => response.text())
.then(data => {
this.setState({ evaluations: data });
console.log(data);
});
Looks like you are making fetch calls to relative url. So by default it will make call to your domain as base url. For example in this case, http://yourdomain.com/evluations, but most likely you want to make call to http://someotherdomain.com/api/evaluations. In order to do that you need to configure reverse proxy in your azure web site (or any other hosting server)
In azure website you can configure reverse proxy as suggested in the following link: https://ppolyzos.com/2015/10/26/reverse-proxy-functionality-in-azure-web-sites/
I have now solved this problem. The things that I have done:
Replace all fetches with this env variable. For the example above:
fetch(`${process.env.REACT_APP_API_PROXY}/evaluations?onlyactiveones=true`, this.credentials)
.then(response => response.text())
.then(data => {
this.setState({ evaluations: data });
console.log(data);
});
Define the env variable as you like. The env variable has to be placed before building the react app, it can not be replaced at runtime.