Is there a way to inject environment variables, e.g. REACT_APP_MY_API into the index.html file?
According to this, it can be done, but I can't seem to get it to work.
REACT_APP_MY_API=https://something.com
<script type="text/javascript">
console.log("%REACT_APP_MY_API%") // undefined
console.log("%NODE_ENV%") // development
</script>
I just tried with an (almost) new CRA setup and it works.
<head>
<title>React App</title>
<script type="text/javascript">
console.log("%REACT_APP_TEST%") // OK
console.log("%NODE_ENV%") // development
</script>
</head>
Did you try restarting the server? I just tried changing the test variable with your example and it works if you restart the development server.
As someone pointed out in the comments, the official documentation of CRA has a section about that.
${process.env.REACT_APP_TEST_VAR}. Tried to rebuild project and nothing worked. It gives me either an error "process is undefined" or treated it as a string. Anybody has any clue what can be wrong?Make sure you restart your create-react-app when adding variables into the .env file
Also make sure you have >= [email protected]
I use .env variables for the meta title of a site with various language versions of the build:
<title>%REACT_APP_SITE_TITLE%</title>
From the docs (here):
react-scripts dependency version is equal or greater than 0.0.9.env file at the same level of your package.jsonREACT_APP_; for example REACT_APP_TITLEprocess.env.REACT_APP_XXX% ie <title>%REACT_APP_TITLE%</title>.env fileIf you want environmental variable in script tag, put the variable in quote:
<script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_MAP_API%&v=3.exp&libraries=places" async
></script>
Solution in 2022
In create react app I have .env.production, .env.staging and .env.development.
In all .env files I have REACT_APP_FB_ID.
So in index.html I just use <meta name="fb:app_id" content="%REACT_APP_FB_ID%" />
I tried like this 'NODE_ENV=development npm start' and it works well
