Hey guys, in this lesson, I want to introduce you to the concept of Environment Variables. 1
And again, similar to the previous lesson, this is not so much about our users about keeping their 2
data safe, 3
it's more about keeping your data safe. 4
So what do I mean by that? 5
In the last lesson you saw that we created session and we had to create an encryption key, a secret. 6
And keeping that secret in our index.js, which, as you may know, is often uploaded to GitHub 7
or you might need to put that onto your server, 8
either way, that information is very, very easily leaked. 9
It's very easy for people to crawl GitHub looking out for these secrets and API keys that they can take 10
advantage of. 11
And very often in the development world, you hear stories like this where a, Developer put AWS keys 12
on GitHub. 13
Then BAD THINGS happened. 14
And it's because currently we're in a bitcoin mining frenzy era. 15
And to mine Bitcoin, you need a lot of computing resources. 16
And those resources get directly turned into money, providing a huge incentive for people to scrape 17
the internet for developers who've accidentally published their secret keys. 18
And this is a good story as well, that I'll link to in the course resources, where this guy, 19
Luke had accidentally published his API keys onto GitHub, and then he racked up an AWS bill of over 20
$3,000 in a very, very short space of time. 21
Now, I think the ending to the story was a happy one, 22
And Amazon AWS actually refunded him the money, but I'm not sure everybody is as lucky as he was. 23
These are some really cautionary tales about keeping your secrets, your API keys off the internet, 24
where it's publicly searchable and where people can steal. 25
That's all very well and good, but how exactly do we do that? 26
Because obviously for our app to work, we need these secrets to be able to encrypt our database. 27
And for us to be able to collaborate with other people or simply just using version control or backing 28
up our project to GitHub, then we will need to publish it. 29
Right? 30
So the way that developers solve this conundrum is through using something called Environment Variables. 31
What exactly are these environment variables used for? 32
Well, there's two major use cases, 33
one is for convenience. 34
Normally when you deploy a large application, the process is quite complicated. 35
And once you've done it, you kind of don't want to mess around with the code base and update the code 36
files, 37
instead, you could have these environment variables which you can change. So certain variables that 38
are being used in your code base could be set as environment variables, and you could modify those 39
variables without having to touch the code. 40
A second reason might be for security. 41
So when you're developing software, you might be uploading your code base somewhere, 42
and it's usually not a good idea to have things like your authentication keys or your API keys to be 43
stored in the same place as the rest of your code. 44
That's where environment variables come in. 45
So environment variables essentially allows us to separate out where we store our keys, our secret 46
stuff, and various other variables away from where our code base is located. 47
Environment variables are basically a very, very simple file that we're going to keep certain sensitive 48
variables, such as encryption keys and API keys. 49
In this lesson, I want to show you how we can do this using a really popular package called dotenv. 50
And you can see just through the sheer number of weekly downloads that it is a really heavily dependent 51
upon module to keep everybody's secrets off of the internet, safe and secure. 52
All right. 53
So let's get started and see how we can implement environment variables in our project and save those 54
secrets and keep the secrets secret. 55
Go ahead and download and extract the folder called 9.4 Environment Variables. 56
And if you look inside package.json, the package that we're using to create these environment variables 57
is called dotenv. 58
If you're not already there, then stop your server, CD over to this particular module and go ahead and 59
run, "npm install" to install that new package. 60
Once you've done that, the next step we need to do in order to move this secret out of our index.js, 61
is to create a file inside this folder. 62
So at the top level, so you can collapse the folder, open the folder, 63
and here you're going to click on this button to add a file. 64
Now whereas normally files end with an extension like .jpeg or .png, 65
in this case, we're only going to give the file an extension name and it's .env. 66
And if you get it right, you should see that on the left-hand side, you get this little gear icon 67
show up. 68
Now if you don't see any of these icons on your VS Code, it's probably because you don't have this extension 69
installed. 70
It's free. 71
We covered it at the beginning of the course, but it's called vscode-icons, and you can add that and 72
it'll give you these pretty little icons to work with. 73
So how do we move this out? 74
Well, literally I am just going to cut my secret and paste it into here. 75
Now I'm going to give it a name. 76
I'm going to call it SESSION_SECRET. 77
And this allows us to see some of the formatting of how environment variables are added. 78
First we have a name for that variable. 79
And notice how there's no constructor in front of it, 80
there's no const or var or whatever. 81
This is not actually JavaScript, 82
this is just a way for us to give this piece of information a name. 83
And everything is in all caps, and each word is separated by an underscore. 84
And then we have an equal sign. 85
And then we have a string enclosed in double quotes. 86
That string is going to be whatever information is going to be associated with that name. 87
The other thing to notice is that there's no space between the start and the end of the equal sign. 88
And also, if you were to create another variable here, you don't have any sort of commas or semicolons 89
or anything, 90
you just start it on a new line. 91
Now that we've got that, let's go ahead and save that. 92
Go back to our index.js. 93
What do we replace this part with? 94
Well, we replace it with process which is a NodeJS process tapping into env which is an environment 95
variable property, and it contains the user environment. 96
And then we tap into the name that we gave it, which in my case was session, "2 S's underscore secret". 97
And this should tap into the environment that this current file is run in in the node process, 98
and it tries to find the one that has this particular name right here. 99
Now, in order to add this file into that environment, we need to use that dotenv module that we imported 100
earlier. 101
So we're going to import env from "dotenv", 102
l ike so. 103
And then we need to also initialize it, 104
so we're going to write env.config. 105
And this is the one where it adds the .env file contents into the process.env so that we can 106
actually have access to it. 107
And that's all it takes to set up an environment variable. 108
So now if we go ahead and run our code so we'll do index.js, 109
and we go to our localhost and we log in. 110
Everything still works exactly the same as before, 111
and we still have our sessions persisting et cetera, but we no longer have that secret right here in the 112
index.js for anyone to read. 113
This is useful when we start thinking about things like professional development. 114
We would have this probably under Source Control. 115
So if you go into this tab here in VS Code, you'll see Initialize Repository which you can click on 116
which will initialize a new source control or in this case a new Git repository for our project, 117
and it can persist all of the things that you want to persist. 118
Now, this includes all of the things that I have in all of the other projects, which is a little bit 119
much, but it's essentially based on the top level. 120
Now, what usually happens when you upload your files to GitHub or any other form of source control, 121
or something like this, you normally will add the dotenv file type to the gitignore. A completely 122
separate file that's added to a gitignore list, which means that when we upload our project to GitHub 123
or any other form of git, it doesn't go online where it could be seen by others, which means it does 124
not get added to Git and given access to other people 125
to see. 126
If you take a look at this URL or simply just search for GitHub node, the GitHub team themselves have 127
actually come up with a list of common things that you should probably ignore if you're making a N ode 128
project and these things include things which are very large, such as any node_modules, because 129
all the dependencies are added together, is a ton of code. 130
You don't want to be uploading downloading that. 131
That's why I always get you to do "npm install" just to get used to the practice, even though we're downloading 132
through zip files, 133
but in the future, if you're working on open source projects, if you're working in a company, you're 134
very often going to be pulling data from a GitHub repository or pushing data to GitHub, 135
and it's important that you don't end up uploading this up and down all the time. 136
Now, the other thing that you'll see in here, which makes sense for us, is our .env files. 137
So you can add other types of .env. 138
So you can specify one which is just for local development, one which is for production local et cetera. 139
But the one that we care about the most is pretty much the bog-standard .env, 140
and this is also ignored for git, which is important. 141
So let me just demo to you what this actually looks like. 142
So I'm going to copy this file. 143
And I'm going to create a new window where I'm going to create a new project. 144
So here's a brand new project. 145
Let me just go ahead and create something. 146
Let's say we CD to the desktop and I "mkdir" create "GitEnvTest". 147
And we go into that. 148
So open that folder. 149
And we open it in our VS Code. 150
Let me just create something called NotSoSecret.js 151
And then inside here we can have whatever it is we want. 152
I'm just going to have some text in here. 153
And then I'm going to add a .env file which is going to contain my TOP TOP TOP SECRETS. 154
And now I'm going to create this as a repository. 155
So in the Source Control Tab I'm going to create repository, I'm going to create an initial commit, I'm 156
going to stage everything 157
and I'm going to publish this branch to a public GitHub repository under my username. 158
So now I should be able to open it up inside GitHub 159
and you will see both of these things .env and NotSoSecret. 160
So .env contains all of my TOP TOP TOP SECRETS which I don't want anybody to know about, 161
and this is really, really bad for me. 162
So let's do it properly this time. 163
Let's show you how we should be doing things. 164
So let's go ahead and CD back and I'm going to make a new directory. 165
Let's call this, ProperWayToGitEnv 166
There we go. 167
And let's go ahead and open that up here instead. 168
And in here I'm going to again use my, let's say we have our index.js which needs to exist, have some 169
code, whatever it may be. 170
And then we have our next file which is our .env containing our top secrets. 171
And now what I'm going to do is actually create my 172
gitignore. 173
So it is simply, ".gitignore", one word no spaces. 174
And then I'm going to copy all of these things from that repository that GitHub created, 175
paste it in here, save this, and then go to my Source Control, initialize repository 176
as I have done before, 177
commit, 178
add everything to staging, and then publish the branch to a public repository. 179
Once that's done, let's go ahead and open it up in GitHub and you can see that thankfully this time 180
I didn't have to remember to remove my .env or to remove any of the other things because my gitignore 181
already tells me, "Don't upload these terribly secret things," and that means I don't end up with somebody 182
stealing my API keys, which is very important. 183
So let these stories serve as a warning and remember to always think about adding a 184
.gitignore file, 185
whenever you start thinking about using Git, which should be at the very beginning, 186
anyways. In this lesson, you've seen how we can use the .env package to add files in the .env 187
file to the local variable, but I want you to have a little go practicing this. 188
If you take a look at the other part of our code, which really should probably be in environment variables 189
is our database setup. 190
Now normally your database would not be localhost, it would be hosted remotely. 191
So anybody with the database access the username and the password would be able to access that database, 192
which is not what you want. 193
So let's prepare for this by switching out the user, the host, the database, the password and the 194
port all into environment variables. 195
See if you can remember how to do this and we'll run through it together. 196
All right. 197
So remember that every single new environment variable has to go on a new line. 198
And I'm going to paste in something I made earlier just to speed things up a bit for you. 199
And I'm giving a description. 200
This is PG Postgres USER, HOST, DATABASE, PASSWORD, and PORT. 201
I've saved each of those values as a string. 202
No spaces anywhere. 203
And now I can go back into my database and replace all of this plain text in here with process.env 204
. 205
In this case it's PG_USER. 206
And you can go through that process for the rest of the lines. 207
So now if somebody looked at our index.js they would say, "Wow, there's all of this secret information 208
that I can't get access to, 209
I don't know what your password is, 210
I don't know what your session secrets are, 211
this doesn't tell me anything that I can do anything bad with," 212
and that's exactly what we want. 213
So hopefully you will have seen how environment variables work 214
and if you're working with any project which requires an API key, especially one which is paid, remember 215
this lesson and come back to it if necessary. 216
In the next lesson, we're going to get back on to upgrading the security level of our website. 217
And instead of storing users passwords ourselves, having to try and make sure people don't hack into 218
our database, encrypting, salting, hashing, all of that, we're going to put all of that responsibility 219
onto a big company like Google. 220
So we're going to learn about Google OAuth. 221
So for all of that and more I'll see you there.