Create React App: using environment variables in index.html

Question

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.

.env

REACT_APP_MY_API=https://something.com

index.html

<script type="text/javascript">
  console.log("%REACT_APP_MY_API%") // undefined 
  console.log("%NODE_ENV%") // development
</script>

Answer 1

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>

Answer 2

From the docs (here):

• make sure your react-scripts dependency version is equal or greater than 0.0.9
• create a .env file at the same level of your package.json
• make sure all you variables start with REACT_APP_; for example REACT_APP_TITLE
• use them in you js / ts code using process.env.REACT_APP_XXX
• or in you html code surrounding it with % ie <title>%REACT_APP_TITLE%</title>
• restart your development server / re-compile your app when making changes to your .env file

Answer 3

I tried like this 'NODE_ENV=development npm start' and it works well

Answer 4

If 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>