Environment Variables

[00:00:00]
>> Burke Holland: Something else that we can do with launch configs, other ways you can use them. Here we have an index file and our index file has a variable at the top that contains our API. Now, normally when you write an application, you don't hard code things like these.

[00:00:21]
Because you may need to change them later. So what do we do? We put them in application settings. In the case of node, that's environment variables. Now node environment variables are cool but they're a little bit tricky to work with and VS Code makes it a little bit easier to pass those into the node process.

[00:00:39]
Because basically what you have to do is you have to call node, run your application and pass in the appropriate variables. In this case let's go ahead and pull this line out. And let's say that we're gonna put it in a variable called,
>> Burke Holland: API base. Okay, so we're gonna pass in a variable to this application called API_BASE.

[00:01:01]
Let me make sure my Typescript watch is still running over here. It is, good. Excuse me.
>> Burke Holland: So if you're not familiar with node environment variables, just know that when you create them or when you pass them in, they're on the process.env object. And then whichever variables you create will be there.

[00:01:20]
So now we need to pass this in. How do we do that? We can do it with the debugger. So I'm gonna come back to the launch. And I'm gonna say, env, and here I can pass in any environment variable. So we said, API_BASE, I think is what we called it.

[00:01:38]
And put the value in, [SOUND] oops. One too many quotes.
>> Burke Holland: And an unnecessary [LAUGH] semi-colon. And now we've got the environment variable for API_BASE. So if we go back here and we add a break point here. In fact, we can just add one right here. And let's go ahead and run this, making sure that we have the right one selected here.

[00:02:02]
I'm gonna go ahead and run it, it's gonna start. Let's enter a color, purple, and then it's gonna break. And then we can look at and inspect, come out of the debug console. And we can say process.env.API_BASE, and you see it's there, see it's there? And if we select it, we can see the value.

[00:02:25]
So now we're passing in this environment variable into the process, okay. You probably don't want to pass environment variables one at a time though in a launch configuration, because oftentimes we don't share launch configurations in GitHub. Sometimes we do. Oftentimes we don't because everybody's machine is different. And so what you can do instead and what you'll find most often is what's called an env file.

[00:02:50]
I've given you an extension to help with the env files as larg config files. I'm gonna add one, and usually they look like this. Usually it's like development.env and then you'll have one called prod.env, maybe one called local.env. Or you might just have one called .env. By the way, material icons knows about env files.

[00:03:12]
I don't know. I guess that's supposed to be a configuration. It looks like Flappy Bird but that's an env file.
>> Student: It's a bunch of sliders.
>> Speaker 2: Is that what it is?
>> Student: Yeah.
>> Burke Holland: Doesn't look like Flappy Bird, looks like Flappy Bird. I've played that game. All right-

[00:03:25]
>> Student: Equalizer.
>> Burke Holland: An equalizer, yeah, all right, so here we can say just like we did before in our launch config. Let's come back and take this out now, let me toggle my terminal down, make some more real estate. So let's get this, let's take this out and our syntax is a little different, so we don't need quotes here.

[00:03:43]
And you can see it's trying to tell me and we actually don't need the streams either. So we can just put it in just like that. So now we need to tell VS code to use this file to load environment variables. So we could put multiple environment variables in here, right?

[00:03:58]
We can put in anything we want, like,
>> Burke Holland: Okay and then let's go back to our launch config and instead of env, what we wanna do here, let's make some more real estate is say, which one of these do you think it is? I'll let y'all guess, see if you can guess the right setting.

[00:04:19]
>> Student: Env file.
>> Burke Holland: Env file, you got it. And look, it knows. Okay, Visual Studio Code is trying so hard to help you out. It has automatically picked up our env file. So we'll click Save here. And then let's come back and we still have a breakpoint? Let's put a breakpoint.

[00:04:38]
Let's put a breakpoint here.
>> Burke Holland: Pink's a color. That's a good one. And we're broken and now if we take a look at our debug console and process process, process.env, dot, there's API space and look, there's favorite band, Owl City. So this is how you can pass environment variables into your launch configurations very easily.

[00:05:05]
This is what you use launch configurations for, is to configure the way that you debug apps and pass in the right arguments to them. You can do a lot of other stuff with launch configurations. We're not gonna go over all of it because there is a ton of it.

[00:05:21]
But just know that if there's something you're trying to do, you can probably do it. The inverse of that is that it makes launch configurations rather complex because you can do so much.