In the last video we spoke about some of the challenges around getting our publishable key inside of
the client side of our application.
Now as a reminder the client side only cares about the publishable key here it doesn't care about the
secret key and the publishable key literally means publishable.
In other words this key right here can really be exposed to the outside world and it will.
Every single time a user downloads or re-act application which is essentially every time they visit
our Web site.
So this right here I just want to reiterate completely fine.
If it is exposed to the outside world not a problem now where we left off we had said that the approach
that we took for securing our API keys on the server side of our project would not work quite as well
on the client side because of the different modules system that we're using.
Fortunately the Create react up project which we use to generate the client side of our application
already has a solution for handling variables like this.
So we're going to pull ups and the Create re-act documentation inside of our browser.
I'm going to make a new tab and we can probably just search for create re-act app environment variables
and can tell that I probably have search for this in the past.
So create re-act up environment variables.
You're going to find the read me right here in the create react up Ribault.
If we click on that it actually does dump us at the very top of the document.
But if you scroll down just a little bit through the Table of Contents you're going to find one the
sections in here is adding custom environment variables.
And that's exactly what we want to do.
We're going to click on this right here and it gives us a lot of documentation about what's going on
with environment variables inside of the Create react outside of our project.
So to be clear we are going to define this strike key as an environment variable by defining it as an
environment variable.
It's going to allow us to kind of abstract out these keys to a separate file where we can just list
them off as constants and freely change between sets of keys that we use for production and development.
You can think of these environment variables as working the exact same way that we have the environment
variable set up on the Heroku side of our application.
So essentially we just set up some constant.
We then make use of it somewhere inside of our project and then at runtime create re-act out is going
to figure out what set of keys it needs to use for us.
Now as we go through the documentation there's like one or two quick things I want to point out to you
that are very important.
First off is this note right here.
It says any custom environment variables that we create must begin with re-act underscore app underscore.
And the reason for this is that we don't want to accidentally expose a private key on our machine which
is a very good reason very good reason.
So we'll just make sure that we expose all of our variables with the name of re-act underscore app and
the front of it.
Now the other thing to be aware of is that to access these environment variables inside of our re-act
code we do it the exact same way that we had done it on the server side of our project which is to scroll
in here so we can see it nice and large all the environment variables will be defined on.
Process.
EMV so Same exact same thing that we did on the back end of our project.
We did say process not envy Daut whatever and boom there is our key right there.
All right let me zoom back out for a second.
So here's a great example of it.
Yup.
Just processed envy blah blah.
And the last thing I want to do in the documentation here is that to define these actual variables there's
a couple of different things we can do.
First off we can add custom or temporary environment variables through the shell and here's how to do
with Windows you're saddled with Linux or Mac OS.
Now these really are custom.
They're like one time set it and forget it.
They're not going to be available for all time.
If you want to use True environment variables you have to define them inside of your shell.
So that's going to be kind of an different configuration between Windows and Mac OS and Linux.
And that's why you know this would kind of be the ideal approach to define them permanently in the shell.
But in this course you might be using Windows.
You might be making use of Mac OS you might be using Linux in the process of defining environment variables
is very much different between all three.
So we're not going to take that approach just because I'm assuming that you have you know who knows
what operating system running right now.
So the way that we're going to be taking care of all this stuff is by creating dot EMV files.
So define to define a permanent environment variable.
We define a file called EMV in the root of our project and then we can make a couple of different EMV
files we can make a young one which is referred to as the default.
We can make a dot dot development which might have a set of development keys and we can also make a
ENP production which has a set of production keys and so that's basically exactly what we're going to
do in the short of it is we're going to make a EMV development and a production.
We're going to stuff our Strype keys in there and then freely reference those keys from somewhere inside
of our code.
Ok so now the very last thing I want to tell you about is that the official docs here say very clearly
like these files should be checked into source control.
I'm going to tell you I do not know why they chose to say that in case you want to use these environment
keys for storing these environment files for storing some keys that you don't really want to be posted
publicly and get up.
That's 100 percent clear.
This is a publishable key that we're talking about right now.
This key will be exposed to the outside world.
It is intended to be.
It should be sent out.
We want it to.
But I completely understand that.
You might think that you don't want to put any keys whatsoever on get hub for any reason at all.
I understand that.
I understand if you want to take that approach.
So if you want to hide these keys you should feel free to check these files that were going to create
into source control or to not excuse me if you want to keep these hidden.
Feel free to add a line inside of our good ignore file and ignore these.
Ian Lee files if you don't want these things to show up and get up again.
I really do not understand why they chose to say specifically that these should be checked into source
control.
I don't know.
Anyways if you know if someone finds out.
Feel free to post on the course discussion.
I would love to hear you know what the thought process there are for this line right here was.
But you know whatever.
So we've spoken about this long enough.
Let's get to it.
At the end of the day after all this talk essentially what we're doing is creating a dot in the development
file.
Same thing for production and then sticking our stripe key in there.
That's it.
It's really it.
Obviously I could have probably just said that at the start.
And you know already to be done with this stuff.
But that's life.
So the one thing I need to tell you is make sure that these two files that we're going to create are
created inside of the client directory client clank clank client because these are client side keys
that we're setting up.
So inside the client directory I'll make a new file called EMV dot development.
And really important make sure you put the dot in front of dot envy and that will also make dot in the
dot production Okay now we're going to define our environment variables inside of both these files again.
Recall that all the different environment variable names that we create must be preceded with re-act
underscore app underscore.
So let's go grab our public key first from the stripe dashboard.
Here is the publishable key.
Copy it all change back over to the DOT DOT developed and file.
I'll say re-act underscore app underscore Strype.
And you know we don't really have to say specifically publishable in this case because we're only working
with published Willkie.
So I was going to say Strype key just to keep the name thing a little bit short.
And I will paste the key in like so now you don't have to wrap it with a string or anything or with
quotes you just say this variable equals this thing.
So we'll save that.
We'll then do the exact same.
Over in the EMV production file as well.
So same name Riak stripe key re-act app is using the stripe key equals blah blah blah.
And we'll save that one too.
OK.
So I know that we've gone quite long at this point and a lot of talk about kind of a boring item here.
But I do want to test this out very quickly.
So I'm going to.
Well let's make sure we can actually like get access to these variables like that is clearly what we
really care about.
So inside my index file inside my SIRC directory inside of client S or C index on yes at the very bottom
of this file I'm going to cancel log out or Strype key.
So I got to say Strype key is an all reference process.
Ian V dot re-act app Strype key like so.
And then just for laughs I want to also conc the log out our our environment is and will do process.
Ian V dot node underscore ENVI as well.
So the documentation I don't know if you read it specifically but the documentation we just looked at
also said that the node underscore in the variable is also defined for us and it works exactly the same
way that it does on the backend.
So it will automatically be set to production or development in the appropriate environment.
And I just want to show that to you just in case you're curious I also want to mention Yes this is the
one variable that is set that is not proceeded by react.
Underscore app underscore.
OK.
Enough talking.
Let's test this darn thing out.
I'll save the index dodgiest file.
We do have to restart our server.
We do have to restart it.
So I'm going to make sure I go back over to my server or kill the running server.
I'll start it back up with NPM run Dev and I will let it just go ahead and do its thing.
Now again I want to remind you that really it's up to you to delete or mean to ignore these files on
get if you don't want to commit them.
Again I can't say enough.
I don't know why the documentation said that you should commit these.
To me it kind of seems like maybe you don't want to because you don't want anyone to see even these
public keys available and get hooked.
Really it's up to you.
OK.
So we should have a refresh here it is and if we look at our console log you'll see very plainly striked
key is global law and our current environment is development.
OK.
So that's pretty much it.
Now two last quick things on tell you about we leave just while we're on this topic as a quick reminder
we are using the same stripe key between both development and production because we want to just use
the same test account because we're not going to go through the process of actually activating our strike
account because it requires all that banking and tax information.
So that's why we're using the same keys here.
Now the other thing I want to tell you very briefly because this is something very very important because
I've seen people make this mistake so so many times throughout courses throughout working on projects
or anything like that.
So in the change over to my terminal you don't have to follow along here just watch what I'm doing so
you understand what's going on.
I can open up a new terminal window and I'm going to open this up inside of my file explorer on my Mac
machine.
OK.
So here's my file explorer.
If I open up my client directory you will notice that dot files were referred to as like the dot EMV
stuff that we just created.
These are referred to as dot files because we preceded the name of the dot right here.
Mac OS interprets these files as being invisible.
So look I'm looking at my client directory right here and inside the client directory there's no dot
in the files and I'm shaking my mouse all over the place because this has caused so many people so many
troubles over the years.
The reason this is relevant is that if for any reason you ever like highlight these files and say oh
I want to reorganize my project I want to like pull all this client's stuff over to like here or something
was totally fine.
We can move the stuff.
But when we drag or when we highlight everything and drag it that will not move the dot files that we
just created.
So I just want to throw that out there so you are 100 percent aware by default.
Mac OS will not show you default files in this interface right here.
And so you just have to be aware of that if you start to highlight everything and drag it and make the
assumption that all the dot files came along with on the right.
OK.
So I want to throw that out there.
Super gotcha super big gotcha.
OK.
So I think that is more than you ever wanted to know about API keys and whatnot.
Back inside the index js file let's clean up those console logs really quick.
We really don't need them.
So I think that at the end of the day we got all three keys everything is working.
We got the keys inside the re-act application everything is happy.
At this point.
So let's take a quick break.
We're going to come back in the next section and we're going to start to set up that re-act stripe check
out component.
So I'll see you in just a minute.