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/vikas62081/React-A...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Linkedin: / vikas62081
Instagram: / imvikas62081
Facebook : / codenemy
Github: github.com/vikas62081
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

[@cancurva]

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

[@mtcindianutube]

Very good tutorial...thank you bro

[@shivanshuchauhan6026]

thank you , very helpful

[@DKMRFCBrlz]

Amazing video

[@mountainman1572]

good work

[@as_if]

That was helpful

[@Oceancoastwaves]

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

[@rajnishkumarblore]

Nice thanks

[@arepellinagaraj2746]

Thank you so much! it helped..👍

[@Codenemy]

Good to hear that :)

[@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

[@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

[@durga972]

👍👍👍

[@Codenemy]

Thanks for watching :)

[@vickySingh-vw8fr]

🙏🙏❤️

[@Codenemy]

Thanks G

[@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,

[@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

[@Arif-um3ph]

same step for build?

[@Codenemy]

Yeah

[@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

[@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