Create React App: using environment variables in index.html

reactjs create-react-app
Colin Ricardo picture Colin Ricardo · Aug 8, 2018 · Viewed 15k times · Source

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

Clafou picture Clafou · Aug 8, 2018

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.

Related questions

Trying to use fetch and pass in mode: no-cors

I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99 via Postman and it returns JSON Additionally I am using create-react-app and would like to avoid setting up any server config. In my client code I am trying …

Read More
How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More
The create-react-app imports restriction outside of src directory

I am using create-react-app. I am trying to call an image from my public folder from a file inside my src/components. I am receiving this error message. ./src/components/website_index.js Module not found: You attempted to import ../../…

Read More