How do I access an environment variable from within the public folder?

Question

In my create-react-app app I have a javascript file in my public folder. Within it, I need to access an environment variable named REACT_APP_ACTUAL_ENV but I'm not sure how I can. Trying the usual process.env.REACT_APP_ACTUAL_ENV doesn't work because process is undefined in the public folder. Looking at https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables, I can do %REACT_APP_ACTUAL_ENV% within an HTML file in the public folder and it works just fine. But the problem is I need to do this within a javascript file somehow, though I'm not sure if it's possible.

Answer 1

In my case, I have to reference REACT_APP_FACEBOOK_APP_ID environment variable to initialize Facebook SDK inside public/index.html file.

I simply assign the variable to HTML element's property then access it using JavaScript like so:

...
<meta property="fb:app_id" content="%REACT_APP_FACEBOOK_APP_ID%" />

<script>
   const facebookAppId = document.querySelector('[property="fb:app_id"]').content;
   // use `facebookAppId` here
</script>