How to Use Environment Variables in React

Are you still putting your API keys in your React code? What are you doing? Learn how to use environment variables in your React app, use different API keys in different environments, and more with env-cmd!

[gracewood]

i'm going to try this out. not only that this is so flexible in terms of CI/CD, but i can test locally on different envs with ease! thank you so much!

[karis]

In case you are using Vite. To reference "env" you have to name them starting with "VITE_". To access those variables use: "import.meta.env.NAME_OF_VAR"

[jerryloi]

Simple and perfect video for setting up environment variables & auto switch environment variables depending on development / production environments in Create React App, thanks!

[mim]

I was fighting with that for some time until I actually saw what my error was thanks to your video. I'm grateful:)

[codewithsabri]

Hi, i have a question on your video, i want to use different api url for dev and prod, but i want that when i upload on netlify for example during production build it use automaticalley productoon url, do i have to add env-cmd beside build script? thanks to reply

[nicetomeetugaming]

Thanks a lot man by adding REACT_APP In start my issue was solved.

[jeevankumar]

thanks man, clean simple implementation straight to the point, love it :-)

[widiudb]

Thanks alot, Sir. Now I don't need to build two times when I want to try to run my reactjs app on the server.

[Theokondak]

Thank you! Well explained and straight to the point

[sunilshah]

Thanks man, just the exact thing I wanted.

[jasminediaz]

thanks for sharing useful info related to env file.

[whatsmyname]

nice explanation. But instead of using `env-cmd`, why not use `dotenv` npm package?

[ButtonWalls]

This is still not working for me i dont know why. NODE_ENV still works though

[epparapallideepika]

I got uncaught reference error: process undefines
What can be the solution for this

[stephenodogwu]

Do we import env-cmd at the top.Please I need help

[monstardev]

Nice video thank you!
I'm new to deploying a react app in production, do we have to include the production env variables into the build ?

[Nabilliban]

What's a good process for allowing other devs to pull down the environment variables if we don't store it on github?

[amerinpal]

How about deployment? If we deploy this application how host server resolve the hidden file. How about npm start command in host server?

[JustinHeath-mdkx]

Thanks the video I watched originally did not include the '-e' for the script

[DomeF.]

Hey dude i was creating my website and i want to implement some kind of ddos protection do you know one that doesn't contain bloatware or tracking?