Using .env file environment variables with create-react-app project

env-file-in-react-create-app.md

For a simple way to use environment variables in your react-create-app project, follow these steps:

1. Create a new file named .env in the root of your project.
2. In your new .env file, add a new key=value pair. For security reasons, you must prepend your key with REACT_APP, for example REACT_APP_API_KEY=abcdefg123456789
3. Restart your server development server. In order for React to find and register your newly created environment variable you must restart your server. Do this every time you add or change a variable.
4. Your new variables will now be available throughout your React app via the global process.env object. In our case, we could get our API key using process.env.REACT_APP_API_KEY.

Additinal notes

• Since we commonly store secrets in .env you probably want to add it to .gitignore.
• You don't need to install the dotenv package or anything else for this to work.

thanks

That was Amzing ! Thx

what happens at deployment I am using git pages, how will I let the built know if I am not uploading?

Go to the repo settings, then pages, there you can choose from what branch to deploy it

i can't access to my environment variable in react application
const BASE_URL = process.env.REACT_APP_BASE_URL;

I will appreciate if you provide a fit example.

Hi all, if it is not working for you, try formatting the variables like this: REACT_APP_API_KEY = "YOUR_API_KEY". Then test it out withconst apiKey = process.env.REACT_APP_API_KEY;

the key/value syntax is fine without quotes and spaces. you just need to restart your dev build with npm run start so webpack can repackage your env var into a new build

it is showing undefined

it has given me an error:

process is not defined

Hello, minhajul-im.
Can you give me your screenshort?

How to add multiple keys in .env ? how can these multiple keys separated in .env file in react app?

Hey, Aakash Narwade. Thank you for your message and I hope this message finds you well. To add multiple keys in a .env file in a React app, you can use the following syntax: KEY1=value1 KEY2=value2 KEY3=value3 Each key-value pair should be on a separate line. The keys should be in uppercase, and the value can be any valid string. That's all. Thank you for your question.

…

On Sun, Feb 11, 2024 at 1:59 AM Aakash Narwade ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ How to add multiple keys in .env ? how can these multiple keys separated in .env file in react app? — Reply to this email directly, view it on GitHub <https://gist.github.com/Haugen/f6d685f18b4bd8a3cf5bcf6272577c5b#gistcomment-4890050> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BACHS2CSDGVO5CN32PM6EELYTCI63BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TEOJTGE4DSNFHORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

If you are getting undefined as a response, double check that your .env file is in the root folder of your app and not a subdirectory.

i used modified env process like as import.meta.env.VITE_REACT_APP_API_KEY and also store it with variable but it didnt work . suck this time with env .

nice


such as this one.

That was nice 😍👍

That was nice

This is nice.