Create React App: using environment variables in index.html
Solution 1
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.
Solution 2
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>
Solution 3
From the docs (here):
- make sure your
react-scripts
dependency version is equal or greater than0.0.9
- create a
.env
file at the same level of yourpackage.json
- make sure all you variables start with
REACT_APP_
; for exampleREACT_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
Solution 4
I tried like this 'NODE_ENV=development npm start' and it works well
Solution 5
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>
Comments
-
Colin Ricardo about 2 years
Is there a way to inject environment variables, e.g.
REACT_APP_MY_API
into theindex.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>
-
Colin Ricardo over 5 yearsVery strange, I had restarted and it still wasn't working. Working now, thanks!
-
Ritesh almost 4 yearsThanks a lot.. it saved my hours of R&D..!!
-
SajithK about 3 yearsThis is only applied at build time.