1
00:00:00,520 --> 00:00:04,810
Okay, So now we're going to start to use environment variables.

2
00:00:04,810 --> 00:00:09,910
Right now I just want to have one for the port number and also the node environment, which could be

3
00:00:09,910 --> 00:00:12,220
either development or production.

4
00:00:12,220 --> 00:00:20,380
So let's go ahead and stop the server for a second and we're going to install a package called dot Env

5
00:00:20,590 --> 00:00:29,260
and this will allow us to basically have a file named dot env or period env and we can define our environment

6
00:00:29,260 --> 00:00:30,640
variables in there.

7
00:00:30,670 --> 00:00:37,750
Then when we deploy we'll actually set those environment variables on the server itself so we can install

8
00:00:37,750 --> 00:00:39,490
this as a dev dependency.

9
00:00:39,490 --> 00:00:44,860
So we'll do dash uppercase D again, make sure you're in your root, not your front end.

10
00:00:44,860 --> 00:00:49,600
And if we look in our package.json you should now have dot env.

11
00:00:50,520 --> 00:00:56,580
So what we'll do is in the root, not in the back end folder or the front end, but in the root we're

12
00:00:56,580 --> 00:00:59,160
going to have a file called dot env.

13
00:00:59,490 --> 00:01:04,560
And this is where we want to put any global environment variables.

14
00:01:04,560 --> 00:01:10,140
So I'm going to add port and the convention is to use all uppercase and we're going to set the port

15
00:01:10,140 --> 00:01:13,920
to let's do 8000 for now just to test it out.

16
00:01:13,920 --> 00:01:17,550
But ultimately I do want it to be 5000, but it's completely up to you.

17
00:01:17,550 --> 00:01:19,530
If you want something different, that's fine.

18
00:01:19,530 --> 00:01:22,170
And then let's do the node environment.

19
00:01:22,170 --> 00:01:23,640
Actually, I'm going to put that at the top.

20
00:01:23,640 --> 00:01:27,720
So node underscore env and we're going to set that to development.

21
00:01:27,720 --> 00:01:33,810
That way we can switch between between development and production because we might have some stuff that

22
00:01:33,810 --> 00:01:37,080
will that will react different depending on the environment.

23
00:01:37,080 --> 00:01:38,310
So we'll save that.

24
00:01:38,310 --> 00:01:46,080
And then let's go into our server.js and in order for those to work we do have to import dot env.

25
00:01:46,110 --> 00:01:54,450
So let's say import dot env from dot env and then we just have to call the config method and it's important

26
00:01:54,450 --> 00:01:58,590
that you call that above where you use any of those environment variables.

27
00:01:58,590 --> 00:02:03,990
So we're going to do it right under the import because I actually want to use one right here.

28
00:02:03,990 --> 00:02:08,460
So we have 8000 as the environment variable.

29
00:02:08,460 --> 00:02:10,050
So I'm going to set this port right here.

30
00:02:10,050 --> 00:02:14,880
I'm going to set it to process dot env dot port.

31
00:02:15,000 --> 00:02:15,270
Okay.

32
00:02:15,270 --> 00:02:21,600
So whenever you want to access one of these variables, you just prefix it with process dot env dot

33
00:02:21,600 --> 00:02:23,130
and then whatever you called it.

34
00:02:23,160 --> 00:02:25,530
Now this should be 8000.

35
00:02:25,530 --> 00:02:32,550
But I do want to have a fallback in case that in case this isn't found so we're going to say or 5000.

36
00:02:32,670 --> 00:02:40,440
So if we run we can just do the server for now, let's say NPM run server and it should start on 8000

37
00:02:40,440 --> 00:02:42,510
because that's what we have in our dot env.

38
00:02:43,320 --> 00:02:43,620
All right.

39
00:02:43,620 --> 00:02:47,670
But like I said, I do ultimately want this to just be 5000.

40
00:02:47,700 --> 00:02:53,500
Now if I save it, it's not going to take effect unless I restart even though we're using Nodemon.

41
00:02:53,500 --> 00:02:58,600
When you add or change anything in this file, you do have to restart the server.

42
00:02:58,600 --> 00:03:05,530
So I'm actually going to run NPM run dev because I want to run both front end and back end.

43
00:03:05,530 --> 00:03:09,360
But you should see real quick, there it is 5000, okay.

44
00:03:09,400 --> 00:03:12,370
Because that's what I have in the dot env file.

45
00:03:13,280 --> 00:03:13,610
All right.

46
00:03:13,610 --> 00:03:17,000
So now we have our environment variables set up.

47
00:03:17,000 --> 00:03:19,580
We have node on and concurrently.

48
00:03:19,580 --> 00:03:24,560
So in the next video, we'll hop back into the front end so that we can actually fetch these products

49
00:03:24,560 --> 00:03:30,380
and the single product from our API rather than just bringing them in from a JavaScript file.