1 00:00:00,260 --> 00:00:00,650 All right. 2 00:00:00,650 --> 00:00:05,030 And up next, let's install two more packages Morgan and dot env. 3 00:00:05,390 --> 00:00:12,050 Now Morgan is an awesome package that provides logs about our requests, which is super, super, super 4 00:00:12,050 --> 00:00:20,210 useful while we're developing especially a full stack project because once in a while you get the situation 5 00:00:20,210 --> 00:00:25,370 where you're sending the request from the front end and everything seems to be correct. 6 00:00:25,520 --> 00:00:28,220 But of course stuff is not working. 7 00:00:28,220 --> 00:00:34,310 And then you go to the server and you're like, Oh, the URL is wrong, or the method and all that. 8 00:00:34,310 --> 00:00:40,250 Now of course you can still have the same error even with Thunder Client, but again, especially with 9 00:00:40,250 --> 00:00:42,290 the front end, it's very, very useful. 10 00:00:42,290 --> 00:00:48,580 And the second one is going to be dot env, which loads up the environment variables. 11 00:00:48,590 --> 00:00:51,080 Now what are environment variables? 12 00:00:51,080 --> 00:00:57,350 Well there are going to be some values that we don't want to share with the rest of the world when we 13 00:00:57,350 --> 00:01:02,430 push our project to a GitHub for example, our database connection string. 14 00:01:02,430 --> 00:01:04,500 So that's something we want to keep secret. 15 00:01:04,739 --> 00:01:07,890 And in order to do that we'll create a file. 16 00:01:07,980 --> 00:01:13,650 But in order to access that dot env file in our project, we need to use this package. 17 00:01:13,650 --> 00:01:16,350 And then of course we'll set up those values locally. 18 00:01:16,560 --> 00:01:23,100 And then once we push this up to production, we'll go to our platform in our case render and then we'll 19 00:01:23,100 --> 00:01:25,200 add them one more time. 20 00:01:25,410 --> 00:01:29,520 And if some of this sounds iffy, trust me, once we start working with these packages, you'll see 21 00:01:29,520 --> 00:01:31,170 exactly what I'm talking about. 22 00:01:31,260 --> 00:01:36,780 Now, if you want to check out their docs, of course you have the links over here in order to install 23 00:01:36,780 --> 00:01:37,350 them. 24 00:01:37,560 --> 00:01:41,490 This is the command you need to run, of course, without the versions and all that. 25 00:01:41,490 --> 00:01:42,510 And then. 26 00:01:43,240 --> 00:01:46,540 In order to get started with Morgan, it's a middleware. 27 00:01:46,570 --> 00:01:52,480 So effectively, we want to import from Morgan and since it's a middleware, we just go with app.use. 28 00:01:52,510 --> 00:01:56,230 We invoke Morgan and in here we pass in a string. 29 00:01:56,500 --> 00:01:58,570 So in my case, I'm going to go with dev option. 30 00:01:58,570 --> 00:02:03,550 But if you want to check out more options, then of course navigate to their docs. 31 00:02:03,730 --> 00:02:08,440 And the only difference is the amount of info you're going to get. 32 00:02:08,440 --> 00:02:11,770 So again, I'm going to go with the dev one, so let's try it out. 33 00:02:11,770 --> 00:02:13,810 I'm going to go to a server. 34 00:02:14,510 --> 00:02:22,430 And right after the Express, I guess we're going to go with import then Morgan from Morgan and I'm 35 00:02:22,430 --> 00:02:25,130 going to do it above the Json. 36 00:02:25,130 --> 00:02:27,080 I'm just going to go with App.use. 37 00:02:27,440 --> 00:02:31,630 Like I said, invoke Morgan and then I'm going to go with Dev option. 38 00:02:31,640 --> 00:02:32,810 Let's save it. 39 00:02:32,840 --> 00:02:34,970 We need to make a request. 40 00:02:35,000 --> 00:02:42,230 Now of course you can also go to a browser and all that, but in my case I'm just going to go with the 41 00:02:42,470 --> 00:02:43,760 one over here. 42 00:02:43,760 --> 00:02:44,840 Let's send it. 43 00:02:44,840 --> 00:02:46,550 So I'll see my response. 44 00:02:46,550 --> 00:02:48,320 But that's not what I'm actually looking for. 45 00:02:48,320 --> 00:02:55,130 Notice in the console I'll have this get then forward slash again, that just means homepage and that 46 00:02:55,130 --> 00:02:56,690 the request was successful. 47 00:02:56,690 --> 00:03:04,460 And again, it's super, super, super useful once we connect our back end to the front end. 48 00:03:04,550 --> 00:03:05,210 All right. 49 00:03:05,600 --> 00:03:07,760 So that's the first package. 50 00:03:08,030 --> 00:03:11,390 Up next, let's talk about the dot envy. 51 00:03:11,510 --> 00:03:18,540 Like I said, this is a file that we create in a route, and this is where we essentially set up the 52 00:03:18,540 --> 00:03:20,640 variables we don't want to share. 53 00:03:20,670 --> 00:03:26,910 Now, there's also some things you can add here that maybe are not that sensitive, but still it's useful 54 00:03:26,910 --> 00:03:27,840 to add them there. 55 00:03:27,930 --> 00:03:35,400 And the first thing I suggest doing the moment you create a dot env is actually add this dot envy to 56 00:03:35,400 --> 00:03:42,600 gitignore because otherwise it's going to get pushed up to a GitHub and that's definitely the last thing 57 00:03:42,600 --> 00:03:42,980 you want. 58 00:03:42,990 --> 00:03:49,260 So make sure you find the git ignore and make sure you add here dot env. 59 00:03:49,410 --> 00:03:55,680 So we don't want to share this, we don't want to add this to our source control, so let's save it 60 00:03:55,680 --> 00:03:58,260 over here and effectively. 61 00:03:58,800 --> 00:04:03,600 We want to grab the envy and we also want to set up the values. 62 00:04:03,870 --> 00:04:08,700 The first value I'm actually going to set up is the node environment. 63 00:04:08,730 --> 00:04:16,589 You see, when we push this up to production, this node environment is a special value that automatically 64 00:04:16,589 --> 00:04:19,920 gets injected and the value will be production. 65 00:04:19,950 --> 00:04:26,070 However, while we're in development, we'll actually add our own value in the dot env. 66 00:04:26,220 --> 00:04:26,790 Why? 67 00:04:26,820 --> 00:04:30,270 Well, because there's certain things that I don't want to run in production. 68 00:04:30,270 --> 00:04:35,550 And again, if you're looking at it and you're a little bit confused, yes, this value will be provided 69 00:04:35,550 --> 00:04:42,750 by our platform and as a result we'll only use this package in development and we won't get those logs 70 00:04:42,750 --> 00:04:44,070 in production. 71 00:04:44,070 --> 00:04:45,670 So let's try it out. 72 00:04:45,690 --> 00:04:52,380 I'm going to navigate first to dot env and let's create both of those variables. 73 00:04:52,380 --> 00:04:57,630 So the second one is going to be for the port and again we'll discuss it once we start using it, but 74 00:04:57,630 --> 00:04:58,810 we might as well set it up. 75 00:04:58,810 --> 00:05:06,700 So dot env we'll set it as key value pair and we'll set it equal to development. 76 00:05:06,700 --> 00:05:07,600 And again. 77 00:05:07,600 --> 00:05:09,250 Yes, in production. 78 00:05:09,850 --> 00:05:15,520 The platform is going to inject that value and that value will be equal to production. 79 00:05:15,700 --> 00:05:17,530 And then the second one is the port. 80 00:05:17,560 --> 00:05:21,790 So we can definitely hard code in a server. 81 00:05:21,790 --> 00:05:28,690 But again, once we push this up to production, a platform is going to also inject that value. 82 00:05:28,690 --> 00:05:30,430 So here's what we're going to do. 83 00:05:30,460 --> 00:05:36,490 We'll make one in dot env and then we'll check whether the port value exists. 84 00:05:36,490 --> 00:05:38,080 If it exists, we'll use that one. 85 00:05:38,080 --> 00:05:41,350 If not, we'll again use some kind of hard coded value. 86 00:05:41,350 --> 00:05:45,010 Just keep in mind, yes, that's the case in production. 87 00:05:45,010 --> 00:05:47,710 This value will be again injected. 88 00:05:47,710 --> 00:05:55,660 I know it might seem a little bit abracadabra since we cannot clearly see the production one, but yes, 89 00:05:55,690 --> 00:05:57,970 those things are happening in production. 90 00:05:57,970 --> 00:06:02,410 So now let's navigate here and essentially we want to access those values, Correct. 91 00:06:02,440 --> 00:06:04,080 Now, what was the syntax? 92 00:06:04,090 --> 00:06:08,830 First, we need to grab the star, basically everything. 93 00:06:08,830 --> 00:06:11,570 And we want to name it as dot env. 94 00:06:11,570 --> 00:06:16,750 So import and let's go as dot env. 95 00:06:16,790 --> 00:06:23,270 So we are just coming up with a value package we're looking for is dot env and we need to invoke it. 96 00:06:23,270 --> 00:06:27,470 So essentially we go with dot env and then config. 97 00:06:27,530 --> 00:06:34,670 Now here and there this package and there's another one might give you some problems if you don't place 98 00:06:34,670 --> 00:06:35,270 it on the top. 99 00:06:35,270 --> 00:06:35,570 Again. 100 00:06:35,570 --> 00:06:37,700 If it works then of course you don't need to do anything. 101 00:06:37,700 --> 00:06:45,770 But if you experience any issues with accessing those values then try moving this all the way to the 102 00:06:45,770 --> 00:06:46,070 top. 103 00:06:46,070 --> 00:06:48,560 So this is exactly what I'm going to do. 104 00:06:48,890 --> 00:06:51,860 Basically, I'm going to place it before the Express. 105 00:06:51,890 --> 00:06:54,050 Let's save it again. 106 00:06:54,050 --> 00:07:00,800 We have the middleware for our Morgan and we just want to wrap it in the condition, I'm going to say 107 00:07:00,800 --> 00:07:07,670 if and in order to access right now those env values we need to go to process dot env and yes, this 108 00:07:07,670 --> 00:07:11,840 is special syntax and then we're looking for the actual variable. 109 00:07:11,840 --> 00:07:19,060 So the first one is node env and we'll set it equal to development. 110 00:07:19,070 --> 00:07:23,210 So if that's the case then I want to run it. 111 00:07:23,210 --> 00:07:30,440 If not, if this is going to be equal to production and of course we're not going to show those logs. 112 00:07:30,440 --> 00:07:32,570 So first of all, let's try it out. 113 00:07:32,600 --> 00:07:40,520 Also something to keep in mind whenever you start messing with Envs, you might need to stop and start 114 00:07:40,520 --> 00:07:41,510 the server. 115 00:07:41,600 --> 00:07:48,290 I know that Node is technically doing that for us, but again, if you experience some glitches, just 116 00:07:48,320 --> 00:07:56,960 try stopping the server the good old manual way here with control C and then again run npm run and dev 117 00:07:57,140 --> 00:07:58,670 and now let's try it out. 118 00:07:58,850 --> 00:08:01,490 I'm going to navigate again back to my thunder client. 119 00:08:01,490 --> 00:08:06,350 Let's send it notice while we're in development, of course we're getting the logs, but. 120 00:08:06,940 --> 00:08:10,930 If we mimic the production environment. 121 00:08:11,910 --> 00:08:13,770 We can go over here with production. 122 00:08:13,770 --> 00:08:16,260 If everything is correct, we shouldn't see that log. 123 00:08:16,890 --> 00:08:19,080 So the value is not equal to development. 124 00:08:19,080 --> 00:08:22,040 And of course, in that case, we're not logging. 125 00:08:22,050 --> 00:08:26,910 Again, notice I still get the log because I do need to stop the server. 126 00:08:26,940 --> 00:08:30,500 That's one of those things when you change the dot env values. 127 00:08:30,510 --> 00:08:33,450 So let's go here with NPM run dev. 128 00:08:33,450 --> 00:08:36,230 And now if everything is correct, check it out. 129 00:08:36,240 --> 00:08:38,909 I make a request but I don't see anything in the console. 130 00:08:38,909 --> 00:08:39,230 Why? 131 00:08:39,240 --> 00:08:43,950 Well, because the node environment is not equal to development. 132 00:08:43,950 --> 00:08:48,090 I know that this is probably somewhat redundant, but I just keep repeating that. 133 00:08:48,090 --> 00:08:53,150 But I think it's very, very important to establish this right out of the gate. 134 00:08:53,160 --> 00:08:55,230 So let's go back to development. 135 00:08:55,230 --> 00:08:57,120 Let's right away. 136 00:08:57,120 --> 00:08:57,930 Stop. 137 00:08:58,810 --> 00:09:00,460 And start the server. 138 00:09:00,460 --> 00:09:04,390 So NPM run dev and let's also set up that port value. 139 00:09:04,540 --> 00:09:08,380 So I'm going to navigate back to my server. 140 00:09:08,500 --> 00:09:14,830 Let's keep on moving and right after the post request, essentially I want to create a variable, so 141 00:09:14,830 --> 00:09:21,760 I'm going to go here with port and that one is equal to again process dot env and then the port. 142 00:09:21,790 --> 00:09:24,340 If it exists, we'll use this one. 143 00:09:24,340 --> 00:09:29,860 If not, we're going to use or operator and we're going to go with 5100. 144 00:09:30,010 --> 00:09:36,370 I know this might seem a little bit redundant since the same value we already have in Dot env, but 145 00:09:36,370 --> 00:09:38,050 yes, basically this is the logic. 146 00:09:38,050 --> 00:09:43,780 Now of course you can go with 4000 for example, but again I'll keep both of them as 51. 147 00:09:44,420 --> 00:09:49,280 So of course, during development, this is the value I'll use for my port value. 148 00:09:49,280 --> 00:09:54,800 And then in production, this one will be injected by our platform. 149 00:09:54,800 --> 00:09:56,300 So let's try it out over here. 150 00:09:56,300 --> 00:10:00,140 We're going to go with port variable instead of hard coding. 151 00:10:00,140 --> 00:10:03,620 And then let's just write some additional stuff over here. 152 00:10:03,620 --> 00:10:09,110 I'm going to say server running on port and let's just access it as well. 153 00:10:09,290 --> 00:10:13,130 And you know, I probably need to change it. 154 00:10:13,760 --> 00:10:16,560 From quotation marks to a template string. 155 00:10:16,580 --> 00:10:18,320 Yep, that's the one. 156 00:10:18,380 --> 00:10:25,640 And if everything is correct, we should see the server running on port 5102. 157 00:10:25,670 --> 00:10:27,870 Super, super useful packages. 158 00:10:27,890 --> 00:10:30,110 One to log. 159 00:10:30,640 --> 00:10:32,710 The info about our requests. 160 00:10:32,710 --> 00:10:38,920 And second one to access dot E and V variables in our application.