How to use environment variables (.env) in react js app - VITE

we'll be talking about um how to handle environment variable in um a vit application um I am using vit react uh it could be V view or whatsoever JavaScript library but the principle should be the same so I'll quickly show you how you can uh how you can call your environment variable I've seen a lot of tutorials where people do a bunch of configurations in order for them to get the the environment variable that is absolutely not necessary in fact some people go ahead to install packages like EMV all those are not necessary so let me do this quickly um by the way if you're looking at this this is uh from my previous tutorial um how to make dark mode in um react I use a v app back the way so I'll just clear all this up so that we can focus on what really matters to us so we just put a div here and we also clear all this so that okay let's focus on what we have here today so we can just do the simple H1 here and um we just put um environment sorry all right so save okay so just in case you're interested in the dark mode U tutorial you can just check uh you know my last tutorial all right so the first thing is to create a new file and we'll call ITV new file. EMV this is what everybody should know already and then we'll we'll create a random variable inside so create a random variable random variable and we give it a value a value can be anything so let's just type in anything there so the first thing you need to know with a V application uh is that you don't just name variables there's a pattern so I've just put in a random variable here this would not work but let's try it out so let's save it come to um the place where you want to call the uh the variable it could be anywhere but I'm using the base file here that is the app.jsx here so in here I I want to do something like maybe I use a P tag this time around and then I want to call in that variable and the variable for you to call it you use input so make sure that this is inside of um this call braces so you do an import dot uh meta do EnV dot what you call called here or what you named your variable here so I just copy this and put it in here um and save it and see what comes out now nothing is showing um very likely because we've not done what we're supposed to do here so in here we're supposed to begin this variable name with vit vit and an underscore so we do vit v i t e and then underscore this save it and after saving it let's come back here and and change this to what we have just named it now and save it you see as soon as we save it we have the variable showing up here and that is how you handle environment variable in a V application now this could also work for react I think regular react I think um if you're using a react app you might need to also change this to react app or react something like that so there's no need to start installing new uh packages and making your application necessarily heavy and you don't need the extra configuration that I've seen a lot of people do in um their v. config so this it's this straightforward and that's all you need so thank you very much for watching this tutorial I'll see you in my next tutorial bye

Channel: Njoku Samson Ebere

Views: 11,394

Keywords: html, web, react, reactjs, tutorial

Id: EQ3Htw6Z0PY

Length: 4min 13sec (253 seconds)

Published: Thu Oct 05 2023