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.

Tried this example but it throws an error saying "process is not defined"

I created my React App using Vite

Hello, I am getting an undefined while trying to use/access the environment variable from .env file
Here is what I have verified and checked:

• The .env file is in the root folder (the same level as package.json)
• I have named the variable in the .env as REACT_APP_API_GATEWAY_PREFIX
• I have restarted the development server after adding the environment variable
• NodeJS version - v20.17.0
• "react": "18.2.0",
• "react-native": "0.73.3"
• I am trying to access the variable using process.env.REACT_APP_API_GATEWAY_PREFIX

This is for a React Native project. Can someone help me out here?

for someone who still get undefined: terminate and rerun your project again

For the people who use Vite react app, you can try this:

in your .env file, you will start your variable name with VITE_something_something_something=value

In your react file, the part you want to get the variable from .env, you write import.meta.env.VITE_something_something_something

for those who are not able to access env variables and process.env.APIKEY shows undefined. You need to know this :
if your project has a similar directory structure :
project
->client(This is your frontend)
->components
->SomeComponent.tsx ( and you need to access env variable in this file then .env should be in client directory not the main project directory)

I made a seperate .env for client and it solved my issue. I think it happens becuase you run "npm start" in client directory ( which is your frontend ) and it will only bundle files from client only.

Hope this helps.

if come to this error "process is not defined" . apply this i solve this problem
create your project root folder in ,env file and use this
VITE_OPEN_API_KEY=keyValue
when use you .env key
const apiKey = import.meta.env.VITE_OPEN_API_KEY;

if not solve in up method alt last apply this in .eslintrc.cjs file
env: {
node: true,
commonjs: true,
browser: true,
es6: true,
},

thanks a lot you save me for losing a lot of time

Thank you so much.

if come to this error "process is not defined" . apply this i solve this problem create your project root folder in ,env file and use this VITE_OPEN_API_KEY=keyValue when use you .env key const apiKey = import.meta.env.VITE_OPEN_API_KEY;

if not solve in up method alt last apply this in .eslintrc.cjs file env: { node: true, commonjs: true, browser: true, es6: true, },

It worked for me Thanks !