React apps have built-in support for environment variables. Here’s how to use them:
1. Add environment variables:
You can add environment variables in your project by creating a file named `.env` in the root folder of your project. Inside this file you can set your environment variables like this:
```
REACT_APP_VARIABLE_NAME=VariableValue
```
Remember, your variables should start with `REACT_APP_` to work properly.
1. Use environment variables in your React code:
To use the environment variable in your code, you can use `process.env`:
```
console.log(process.env.REACT_APP_VARIABLE_NAME);
```
1. Refresh environment variables:
React would not instantly refresh your environment variables in `React` dev server if you make any changes. You would need to manually refresh them. For doing this, stop your dev server and start it again.
The other important point is that variables declared in `.env` file will be public on the frontend. So if you are deploying on server or Vercel, Netlify, and need environment variables to be hidden for security purposes, you should set them in their dashboard. The `.env` file should be used only for local development.
