React configure variables based on environment

Question

In my react app, I have a component say chart in which an external API is called.

While running in the local, the API URL will be localhost:8080 When deployed and the API URL should be prod:8080

The examples based on.env uses process.env and inside the component where the API is called process is undefined.

Is there a way to access the env file inside the component which runs on the browser.

Answer 1

If you are using CRA:

React's documentation on environment variables:

"Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_. "

Otherwise you might use something like dotenv and import it in your application index.tsx

For your specific use case, you also want to have 2 .env files since you want one for development and production . So take a look a this .