React js Environment Setup in 14 Minutes for Beginner

In this video I cover everything you need to know about handling multiple environment like development, testing (QA), staging and production in a react app without any code change using environment files and variable. As environment changes need to make many changes in app so it will refer current environment not previous one. To keep to secrete keys secure environment variable is good option, As many common mistakes that developers make storing those in app files which is visible to others too.
GitHub Code
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Link : github.com/vik...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Linkedin: / vikas62081
Instagram: / imvikas62081
Facebook : / codenemy
Github: github.com/vik...
Email: [e-mail]
Concept Covered
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
React environment setup
How to setup environment (env) variables in React
How to env files in React
Best practices for storing credentials in React
Secure you react app by hiding confidential information
Chapters
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
0:05 Intro
01:40 Why Multiple Environment
02:50 Logger for production
04:30 Env-cmd package intro
05:18 Create env files
08:02 Call env files in start react script
10:30 Read env variable value
11:36 Render value on UI
13:18 Summary
13:48 Outro
Tags
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Hide api Keys using Custom Environment File
Environment Files
Environment Variables
ReactJS Tutorial
For Beginner
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
#codenemy #Env #React #Production

[@collins_outlaw4884]

Thank you.... It worked on my express backend API

[@can92oz]

bro !!!!! just thanks alot it will be so much easier with this package

[@bananamaker4877]

Exactly what I needed to know, thanks.

[@mountainman1572]

good work

[@DKMRFCBrlz]

Amazing video

[@lokeshk6676]

Hi thanks for the video. -f flag is used to configure .env file path. By default it points to root, if you want to move into env folder then use 'env-cmd -f ./env/.env.qa react-scripts start'

[@Codenemy]

It helps, Thanks

[@mtcindianutube]

Very good tutorial...thank you bro

[@Amit2828Aug]

Bro how to deploy.env in Azure Storage Static website . We want to build react app only once in pipeline and deploy artifact in different environments pointing to different env file. Can you suggest please

[@Oceancoastwaves]

Thanks it helped. If we use react-router, with this .env.{name} in place do we need to take care of anything else

[@arepellinagaraj2746]

Thank you so much! it helped..👍

[@Codenemy]

Good to hear that :)

[@as_if]

That was helpful

[@vdingding]

How to setup multiple environments to connect different databases for both nodejs and reactjs.

[@Codenemy]

The way i have created different env, you can do so and provide data base url along with credentials and refer same from React js application

[@bharathia6004]

Hi bro, thanks for the video. Shall we show/hide different components based on environment? For example I have home and about page. I want to show only home page in "qa" and both in "prod".

[@Codenemy]

Of course you can, But better to about routing based on environment

[@shivanshuchauhan6026]

thank you , very helpful

[@Arif-um3ph]

same step for build?

[@Codenemy]

Yeah

[@rajnishkumarblore]

Nice thanks

[@rishabhjain5135]

why do we have different apis for different environment? Why cannot we use the same api across all environment?

[@jagdishtyagi1021]

because development mostly uses dummy data and buggy code and hardly deals with data that is real or live (production). qa is for features and data that is already tested or being tested by tester

[@travelwidmanish51]

Hi Vikas, Can you please help me to setup Azure CICD pipeline using this different .env files. Currently we have CICD setup of one single .env files but how to use the same yml files for different .env

[@prachisharma9181]

Hi i have same question… did u get the answer for it.

[@travelwidmanish51]

@@prachisharma9181 Hey, I haven’t got the answer but I have find the solution and implemented.

[@prachisharma9181]

Could you please help me with that,

[@durga972]

👍👍👍

[@Codenemy]

Thanks for watching :)

[@vickySingh-vw8fr]

🙏🙏❤️

[@Codenemy]

Thanks G

[@bacchi8252]

DOESNT WORK on my code, when i do npm run start when there are no .env files it creates the .env.development.local file and when i try this method to add new env such as .env.production.local it always takes the backend url of .env.development.local sigghhh

[@Codenemy]

Could you please clone my repo and execute once and try

[@bacchi8252]

@@Codenemy it worked, thank you