CODEWITHSUNDEEP
reactjscreate-react-app
Colin Ricardo
Colin Ricardo

Reputation: 17239

Create React App: using environment variables in index.html

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>

Upvotes: 103

Views: 68063

Answers (6)

Alexander Kolarov
Alexander Kolarov

Reputation: 855

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%" />

Upvotes: 3

ewulff
ewulff

Reputation: 2259

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

Upvotes: 32

Ericgit
Ericgit

Reputation: 7043

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>

Upvotes: 4

Clafouti
Clafouti

Reputation: 4595

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.

Upvotes: 129

HAS-Jack
HAS-Jack

Reputation: 650

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>

Upvotes: 39

ling yu
ling yu

Reputation: 66

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

Upvotes: 1

Related Questions