Check Production and Staging environment inside HTML file in a React App

Question

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>

Answer 1

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:

https://webpack.js.org/plugins/define-plugin/