Create React App: using environment variables in index.html

ReactjsCreate React-App

Reactjs Problem Overview

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>

Reactjs Solutions

Solution 1 - Reactjs

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

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

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

Solution 4 - Reactjs

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

Solution 5 - Reactjs

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>
Categories
Recommended Reactjs Solutions
Recommended Create React-App Solutions

Previous Solution:

No IDEA annotations attached to the JDK 1.8 (C:\...), some issues will not be found

JavaAndroid StudioJava 8Android Studio-3.1

Next Solution:

ScrollController not attached to any scroll views

Flutter

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionColin RicardoView Question on Stackoverflow
Solution 1 - ReactjsClafoutiView Answer on Stackoverflow
Solution 2 - ReactjsHAS-JackView Answer on Stackoverflow
Solution 3 - ReactjsErwolView Answer on Stackoverflow
Solution 4 - Reactjsling yuView Answer on Stackoverflow
Solution 5 - ReactjsEricgitView Answer on Stackoverflow