How to Use .env File in React Project?

In React Project How to Create .env File and How to Use .env File in React Project? So IN this tutorial, we are going to add .env file in React Project So let’s start this article without wasting your time.

How to Use .env File in React Project?

Method 1: Run this Command

First of all, Just run this command in your terminal.

npm install dotenv --save

And then add this line in Your app.

require('dotenv').config()

Now, Create .env file at the root of your project. and add variables into .env Just like this.

// .env File 

REACT_APP_API_KEY = 'api-key-here'
REACT_APP_SECRET_NAME = 'secret-name-here'

And, then you can Use .env variable just like this.

<b>{process.env.REACT_APP_SECRET_NAME}</b>

Now, You can Use env variables in your project. Hope You understand. Thanks.

Method 2: Follow this step

First of all, create .env file at the root of your project. and add variables into .env file.

#.env file
REACT_APP_SECRET_NAME = 'secret-name-here'

And then You can Use .env file variable just putting process and then env and then your variable name. Just like this.

process.env.REACT_APP_SECRET_NAME

Now, You can add env variables in your project. Thank you.

Conclusion

It’s all About this article. Hope this method worked for you. Comment below Your thoughts and your queries. Also, Comment below which method worked for you?

Also, Read

• Attempted import error: ‘Redirect’ is not exported from ‘react-router-dom’
• Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
• Module not found: Can’t resolve ‘web-vitals’
• Module not found: Can’t resolve ‘@mui/icons-material/FileDownload’
• Module.createRequire is not a function