Great.
So our initial functionality works, we have Packy, we added to our URL course we constructed with
the root and point as well as the photos, and as a result, we get back 10 images.
The problem right now is that we are sharing our access key with the rest of the world.
So eventually when you push your project up to get up, anyone who visits the repo can just grab the
key and he or she can do whatever they please with the key.
And that is not the best practice.
It is much better to set up environment variables and then add that EMV file to the get ignored.
So when we push this up to you to get a well, we can only see the name of the value.
OK, so we don't see the actual.
And this is exactly what we're going to do in this video.
Now, environment variables or in variables, how they are also called are not specific to react or
create react up.
So the boilerplate that we're using to set up our apps.
But there are some gotchas when it comes to using and setting up environment variables and create react
app environment.
And originally the environmental variables are coming from the node.
Now, if you want to get more info, just navigate to your favorite search engine online.
You can type C are A and then environmental variables and you should see some of the links on the first
one probably will lead back to the docs and my noticiero.
You can keep on scrolling and you'll get more info and I'll reference here and there.
There's documents page as well, and we start by creating dot and we file.
However, the location is extremely, extremely, extremely important.
So you don't you don't put the DOT N.V. in the source.
You have to put it in route.
Now, when I talk about road, I'm not talking about our whole project.
I'm talking about the up folder.
Or, for example, if you're working in a final folder or if you would be working in a different project.
And then we have final answer.
So keep in mind that whenever you have a project, just place it in the road.
And I guess the easiest way to remember is just place it side by side with git ignore or package Chazen.
So in here I'll say new file and the name is also important.
So we go at DOT and then N.V., so that just means that you won't be able to see it in traditional messed
up.
So essentially, if you take a look at the folder using the finder, you won't be able to see it, that's
all.
So we go with a dot in we and then we're setting up key value pairs.
So we have a name of the variable and then the value now in create react up all your names must start
with uppercase, react underscore.
Now after that the name is up to you.
You can call it bananas but the prefix E is important.
Otherwise create react up.
It's not going to be able to find.
So just grab this prefix or you can type it out, copy and paste and then come up with your name.
So I'm going to go with Axis and then underscore key and then of course we would need to provide the
value.
Now the key here is that we don't need to go with quotation marks or anything like that.
We just grab our volume.
Whatever it is, or access key and copy and paste online, once we have this one in place, of course
we would want to access it so we would navigate to app Jeff's.
And I noticed here I already set up the variable, but I'm going to do it one more time together just
so we all are on the same page.
So we go here with Consed and then some kind of name.
So in my case I'm going to go with client and then uppercase, Heidi, and then I would want to construct
it.
I would want to construct my template strength.
So again, the same thing we go with Questionmark and the URL of course stays exactly the same.
So we go with client underscore ID and instead of copying pasting the value like we did previously.
Now, of course, I would want to access that EMV variable and the way we access it, we go with process
that ended up online or whatever is the name.
So we go here with process process that EMV and then whatever is the name.
So in my case, of course, it was react under scrap and then the access key access and now you want
to avoid some unnecessary bugs.
You can just copy paste, which is exactly what I'm going to do because typing is not my best friend.
So I'll save it over here.
And now, of course, where we have the client I need now I'll pass it my variable.
Not one thing that I would like to mention, though, is that whenever you set up this DOT N.V., so
the file for the environment variables, you must restart the server.
So the def server.
And the way we do that of course, is by going to the terminal and stopping the server we control,
say, and then we go with NPM and then start.
And of course where I have right now the API key, I will remove the sucker here and I'm just going
to say that I would like to access the variable by the name of client Iot.
By the way, I messed that up over here.
It should be client, not with the server, with client tidy.
And then where I have the Manyara course now I'm going to access my client ID and if everything is correct,
we should still get back those damn images.
So let me refresh Amaresh now.
Everything works.
And if you check it out, of course.
Now when I'll push this up to the GitHub.
No one will be able to see Mikey, they'll just a process that enemy and then react and then whatever
is the name.
And of course that is a better practice because then people cannot take your key and use it however
they would like.
Now, one last thing that I would like to mention is that when you set up dot e and we also make sure
that in the get ignored, you have this included.
So essentially get ignored is a file that just specifies which files will be ignored by the social control.
And since you wouldn't want to push the Dot V to the get, that's why you would want to also include
this file, because otherwise if you set up dot file and then if you pass in the value and you set up
everything correctly in your code, if you want to add that file to get ignore, well, then it's pretty
much useless because the person who was looking for the access key can simply go to Dot and V and check
out the value.
So the whole idea is to create this file and then right away add it to the get ignore, which, by the
way, already did.
I'm just telling you for your own project.
And then of course, you would want to restart the server so you don't get some silly bugs.
And then eventually, whenever you want to use it, you just go with process that energy and whatever
is the name.
And of course, you can have as many valorise as you would want over here.
Just remember that you don't need to have quotation marks or nothing like that.
And one last thing that I would want to mention, if you take a look at the final one, so the final
folder in stock photos, you won't be able to run the project if you don't have the data entry.
So if you want to compare your code, of course, you can go to the final folder.
But if you want to run the final folder, then before you do anything, you need to create the dot and
file line, set up your value.
So you need to check.
First of all, what is the name for my variable?
And of course, you can see that in the address and notice how the name is exactly the same.
So with react, underscore then underscore access, underscore key.
That is the name that you must have in the dot, in file, in the final folder again.
And you need to pass in your value for key.
So I already set up the data entry, but you won't be able to see that because of course I did include
in the Gettinger that's why.
Yeah.
On my machine of course you can see it but on your you want so create the react action scheme.
That's the variable.
And then pass in your value and then of course you go with traditional npm install and then npm start.
Otherwise if you just try to run the project, the server will complain that hey listen, I cannot find
this specific key.
So that's the difference between different projects where of course previously you were able to run
any of the projects by just installing dependencies.
In this case, since we're using the API key in a project, of course, it's a bit different.
Again, the whole setup is so we're not sharing this key with the rest of the world when we push our
project up to the GitHub.