I am trying to integrate a 3rd party app inside my React App. I have to use different keys for production and staging but I am unable to figure out how to achieve that in React and Node applications I can do it by process.env but in index.html I am unable to figure out how can I achieve that.
Here is my pseudocode which I am trying to pull for my index.html file for my React project
<script>
if(env === production){
some_app.init('TOKEN_FOR_PRODUCTION');
}
else{
some_app.init('TOKEN_FOR_STAGING_OR_DEV');
}
</script>While I personally prefer to store all API keys on the server itself, this guide indicates that there are other ways to do it:
https://www.geeksforgeeks.org/how-to-hide-your-api-keys-from-public-in-reactjs/
Additionally, to define differences between prod and staging in the front end alone, I recommend defining plug in variables using webpack: