1 00:00:00,600 --> 00:00:06,040 Okay, so welcome back to the very last section of this tutorial where we are going to deploy this entire 2 00:00:06,040 --> 00:00:07,680 application that we have built. 3 00:00:08,000 --> 00:00:14,480 Before we do any configuration, I just want to explain this concept where we currently run our server 4 00:00:14,480 --> 00:00:17,080 and client on different places. 5 00:00:17,120 --> 00:00:17,720 Right. 6 00:00:17,760 --> 00:00:24,160 What we'd like to do is just take them maybe under the same domain, because if we now deploy this on 7 00:00:24,160 --> 00:00:29,880 a different place and deploy this on a different place, then we need to send a request from client 8 00:00:29,920 --> 00:00:31,120 to the backend. 9 00:00:31,360 --> 00:00:38,560 And like this is fine, we could do so, but it would be a bit more convenient for us if we just take 10 00:00:38,560 --> 00:00:41,880 them and just have them one place, right? 11 00:00:41,920 --> 00:00:46,720 So let's say this is going to be our server, let's say server. 12 00:00:47,040 --> 00:00:55,520 Let's say uh, the URL for this could be something like Netflix dot, let's say dash simple or let's 13 00:00:55,520 --> 00:00:57,120 say clone.com. 14 00:00:57,400 --> 00:01:00,350 We're going to deploy this in a In a place like this. 15 00:01:00,350 --> 00:01:04,070 And this will be both our server and client. 16 00:01:04,470 --> 00:01:07,150 And this is the concept that I just wanted to mention. 17 00:01:07,150 --> 00:01:13,310 So we are not going to deploy both of them separately, but instead just have them under the same domain. 18 00:01:13,430 --> 00:01:17,990 And here in this case our hero is going to be our server code. 19 00:01:18,030 --> 00:01:18,590 Right. 20 00:01:18,630 --> 00:01:20,790 This is going to be our backend code. 21 00:01:20,830 --> 00:01:26,510 This is going to both serve our API endpoints as well as our react application. 22 00:01:26,750 --> 00:01:32,830 So I know this might sound a bit complicated if you have never used it, but this is just going to make 23 00:01:32,830 --> 00:01:33,910 sense in a second. 24 00:01:34,310 --> 00:01:36,990 So let's go ahead and try to configure this. 25 00:01:37,310 --> 00:01:41,230 I will go under the back end under the Server.js. 26 00:01:41,470 --> 00:01:45,910 And here in this file we will just do a little bit of configuration. 27 00:01:46,150 --> 00:01:51,950 Let's first say import the path package coming from node okay. 28 00:01:51,990 --> 00:01:53,710 This is a built in module. 29 00:01:53,870 --> 00:01:59,620 And we'll click to create a variable called Underscore underscore directory name. 30 00:01:59,780 --> 00:02:02,980 And we'll say it's going to be equal to path dot resolve. 31 00:02:03,180 --> 00:02:11,300 And after all these routes we would like to create let's say an if check we will say if process dot 32 00:02:12,300 --> 00:02:14,900 v dot note underscore env. 33 00:02:15,140 --> 00:02:18,860 And I just remember that we are not using environment variables like this. 34 00:02:18,860 --> 00:02:22,860 But instead we have created this configuration called env vars. 35 00:02:22,900 --> 00:02:25,700 And you can get the node env from here right. 36 00:02:25,980 --> 00:02:31,820 If this is equal to the production then we would like to do this uh code block. 37 00:02:31,820 --> 00:02:32,260 Right. 38 00:02:32,740 --> 00:02:37,820 So what we'd like to do is just convert this front end folder to be static assets. 39 00:02:38,100 --> 00:02:43,180 And in the production we will run this script under the package.json. 40 00:02:43,220 --> 00:02:44,300 Under the front end. 41 00:02:44,700 --> 00:02:46,380 It is called build. 42 00:02:46,420 --> 00:02:49,300 Let's try to do so and just see what is going to happen. 43 00:02:49,340 --> 00:02:52,500 I'll just kill this terminal and kill this one. 44 00:02:52,500 --> 00:02:59,730 Just to make things a bit easier for us, let's say clean the console and just say npm run build. 45 00:03:00,210 --> 00:03:04,290 So this is going to build the production version of this frontend folder. 46 00:03:04,730 --> 00:03:07,930 It is going to put everything under a dist folder. 47 00:03:08,530 --> 00:03:10,090 So let's wait for this. 48 00:03:10,810 --> 00:03:12,450 Once this is completed there we go. 49 00:03:12,490 --> 00:03:13,970 We just got the dist folder. 50 00:03:13,970 --> 00:03:16,570 And this is what we're going to have in the production. 51 00:03:16,770 --> 00:03:20,010 So we will say let's say app dot use. 52 00:03:20,010 --> 00:03:27,570 And we can call this express dot static function where we would like to convert this path to be a static 53 00:03:27,570 --> 00:03:28,130 path. 54 00:03:28,130 --> 00:03:33,290 Basically let's say path dot join underscore underscore their name. 55 00:03:33,330 --> 00:03:35,530 And I'll explain what that means. 56 00:03:35,570 --> 00:03:39,530 We will go under the front end and we have the dist folder. 57 00:03:39,570 --> 00:03:42,890 This is going to be the static assets that we will have. 58 00:03:42,930 --> 00:03:47,050 Which means this would be our client application right. 59 00:03:47,090 --> 00:03:48,850 This is our react application. 60 00:03:48,850 --> 00:03:55,570 And this underscore their name is is means I mean it means that we are under the root, because this 61 00:03:55,570 --> 00:03:59,130 would be the place that we are, that we're going to be running this file. 62 00:03:59,410 --> 00:04:06,370 So from the root, go under the front end and from there go under the dist and make this to be our static 63 00:04:06,410 --> 00:04:07,010 assets. 64 00:04:07,090 --> 00:04:13,170 So if you go here you can see we have index.html all of our image images right. 65 00:04:13,210 --> 00:04:14,370 All of our assets. 66 00:04:14,370 --> 00:04:19,490 And we have the JavaScript code that is being optimized and converted. 67 00:04:20,850 --> 00:04:21,290 Okay. 68 00:04:21,530 --> 00:04:23,690 So this is the first thing that we have done. 69 00:04:23,690 --> 00:04:29,850 And we will say app dot get any other routes in these API routes. 70 00:04:29,850 --> 00:04:33,530 We would like to run this controller request and response. 71 00:04:33,570 --> 00:04:37,290 Let's get this one and we'll just call it like this. 72 00:04:37,330 --> 00:04:38,290 We'll go here. 73 00:04:38,490 --> 00:04:45,490 In this case we would like to just res dot send file let's say path dot resolve their name. 74 00:04:45,530 --> 00:04:50,690 Go under the front end, go under the dist and return the index dot HTML file. 75 00:04:51,010 --> 00:04:55,440 This is something that we have as well under the dist assets. 76 00:04:55,680 --> 00:04:57,640 Um, no, not under the assets. 77 00:04:57,640 --> 00:05:00,200 So under the dist we have index dot HTML. 78 00:05:00,280 --> 00:05:01,240 This is the path. 79 00:05:01,240 --> 00:05:03,640 This is the file that we're going to be returning. 80 00:05:03,800 --> 00:05:04,800 I hope this makes sense. 81 00:05:04,840 --> 00:05:09,200 At this point we just say if we hit API routes then handle it. 82 00:05:09,200 --> 00:05:13,920 But any other routes then these you should show the react application. 83 00:05:14,040 --> 00:05:16,320 And we're going to see this in action. 84 00:05:16,680 --> 00:05:20,400 So this is the entire configuration that we need for the Server.js. 85 00:05:20,520 --> 00:05:26,160 Just a simple if check, we convert our front end folder to be our static assets. 86 00:05:26,240 --> 00:05:30,080 And we're using this folder which is our production ready code. 87 00:05:30,480 --> 00:05:33,160 And we'll go into the package.json. 88 00:05:33,200 --> 00:05:35,280 We have not this one. 89 00:05:35,840 --> 00:05:37,800 We have this under the back end. 90 00:05:37,840 --> 00:05:38,320 Right. 91 00:05:38,560 --> 00:05:44,720 So this is the development server that we just use when we build our application. 92 00:05:44,720 --> 00:05:48,440 But once we deploy our application we would like to have one more. 93 00:05:48,480 --> 00:05:52,950 Just like in the front end this is going to be building our code, right? 94 00:05:52,990 --> 00:05:53,950 Our code base. 95 00:05:54,150 --> 00:05:56,750 So in production, what do we want to do first? 96 00:05:57,190 --> 00:06:02,230 Well, when we deploy this application we are not going to have the node modules because we don't really 97 00:06:02,230 --> 00:06:04,670 push them to the GitHub as you can imagine. 98 00:06:04,790 --> 00:06:09,110 So what we'll be doing is just first say npm install. 99 00:06:09,150 --> 00:06:12,510 This is going to install all the dependencies for the backend. 100 00:06:12,550 --> 00:06:12,790 Okay. 101 00:06:12,830 --> 00:06:15,790 It is going to install this package or this folder. 102 00:06:16,110 --> 00:06:22,350 Then we could say you should install the dependencies but this time for front end. 103 00:06:22,390 --> 00:06:25,790 So we'll just say prefix front end. 104 00:06:25,950 --> 00:06:32,190 And this basically means run this command under the front end folder so that we can get the node modules 105 00:06:32,190 --> 00:06:34,270 for our react application as well. 106 00:06:34,550 --> 00:06:39,150 And once you completed this then you should build the front end application. 107 00:06:39,190 --> 00:06:47,030 We will say npm run build and again prefix front end so that it is going to create this dist folder. 108 00:06:47,350 --> 00:06:49,900 So this is going to be it for the build command. 109 00:06:50,020 --> 00:06:53,100 And finally we will have the start command. 110 00:06:53,220 --> 00:06:58,020 Now that we have built our application, it is time to start it in the development server. 111 00:06:58,420 --> 00:06:59,580 We'll say start. 112 00:06:59,740 --> 00:07:04,940 We will just say um let's say node back end server dot js. 113 00:07:05,300 --> 00:07:07,740 In the development we run with node man. 114 00:07:07,740 --> 00:07:10,020 But here we just run it with node. 115 00:07:10,020 --> 00:07:12,060 So it is going to start it only once. 116 00:07:12,380 --> 00:07:14,900 And let me just take this above. 117 00:07:15,220 --> 00:07:20,660 Put a comma so that I just have the dev start and build in this exact same order. 118 00:07:21,140 --> 00:07:30,820 And when we run the dev, what we can do is just set the node env to be development and copy this. 119 00:07:30,940 --> 00:07:34,940 When we start the application it is going to be the production environment. 120 00:07:35,180 --> 00:07:37,460 So production just like this. 121 00:07:37,660 --> 00:07:45,100 Now let's try to actually build this application and start, uh, start this out in our uh machine. 122 00:07:45,100 --> 00:07:46,540 And then we'll try to deploy. 123 00:07:46,770 --> 00:07:50,330 What I'll be doing is just first delete the node modules for the back end. 124 00:07:51,290 --> 00:07:56,610 Let's say yes, delete this and it is asking for the permission. 125 00:07:56,930 --> 00:07:57,170 Okay. 126 00:07:57,210 --> 00:07:58,370 Delete permanently. 127 00:07:58,650 --> 00:07:59,330 It is gone. 128 00:07:59,370 --> 00:08:02,010 Let's delete this one as well in the front end. 129 00:08:02,330 --> 00:08:06,570 Because when we deploy our code to GitHub this is going to be the exact same thing. 130 00:08:06,610 --> 00:08:09,610 We are not going to have them in the GitHub repo. 131 00:08:09,770 --> 00:08:11,650 And let's delete this as well. 132 00:08:11,690 --> 00:08:13,410 We're not going to have it as well. 133 00:08:13,850 --> 00:08:14,250 Okay. 134 00:08:14,290 --> 00:08:18,530 So when we deploy our code to GitHub this is the code base that we will have. 135 00:08:18,650 --> 00:08:21,290 Maybe here we could add a git ignore. 136 00:08:21,690 --> 00:08:25,090 I am going to take this and put it to the root. 137 00:08:26,570 --> 00:08:31,290 Let's just see we have these folders being ignored. 138 00:08:31,330 --> 00:08:37,610 Let's just add the dot env at the end so that we don't really leak our environment variables to our 139 00:08:37,650 --> 00:08:38,570 GitHub account. 140 00:08:39,570 --> 00:08:39,970 Okay. 141 00:08:40,050 --> 00:08:44,850 So we'll just go ahead and run this npm run build command. 142 00:08:44,850 --> 00:08:46,200 Let's see what's going to happen. 143 00:08:46,440 --> 00:08:48,520 Let's open up a new terminal. 144 00:08:48,560 --> 00:08:49,640 Kill the front end. 145 00:08:49,680 --> 00:08:52,440 We should be running this on the root. 146 00:08:52,960 --> 00:08:59,720 I'll say npm run build and it is going to first install the dependencies for the back end. 147 00:08:59,760 --> 00:09:01,640 We should get node modules folder. 148 00:09:01,680 --> 00:09:02,360 There we go. 149 00:09:02,600 --> 00:09:05,840 Then we will install the packages for the front end. 150 00:09:06,200 --> 00:09:08,280 We should be able to have that one as well. 151 00:09:08,320 --> 00:09:10,200 And it's going to now build it. 152 00:09:10,200 --> 00:09:13,160 So we'll get the dist folder under the front end. 153 00:09:13,480 --> 00:09:15,560 So this is what it is trying to do. 154 00:09:16,280 --> 00:09:17,280 Let's just wait. 155 00:09:26,160 --> 00:09:28,520 So it just install the packages for the front end. 156 00:09:28,520 --> 00:09:30,920 And now it is trying to build it right. 157 00:09:30,960 --> 00:09:32,520 We just run all of them. 158 00:09:32,560 --> 00:09:34,200 NPM install for the back end. 159 00:09:34,200 --> 00:09:35,240 For the front end. 160 00:09:35,280 --> 00:09:37,080 And now it is building it. 161 00:09:37,680 --> 00:09:41,000 Let's see if we are going to get the dist folder or not. 162 00:09:41,600 --> 00:09:43,240 Probably we're going to get. 163 00:09:45,070 --> 00:09:47,110 Okay, so everything is being compiled. 164 00:09:47,110 --> 00:09:48,470 We got the dist folder. 165 00:09:48,470 --> 00:09:54,790 Now we could just say npm run start which is going to start it as the production environment. 166 00:09:54,830 --> 00:09:57,390 I'll say npm run start. 167 00:09:57,390 --> 00:10:00,510 And if we cannot see it I could maybe bring this up here. 168 00:10:01,950 --> 00:10:02,830 So let's see. 169 00:10:03,470 --> 00:10:05,790 Now it is being set to production. 170 00:10:08,150 --> 00:10:11,310 And our server started and MongoDB connected. 171 00:10:11,310 --> 00:10:17,630 Let's visit localhost 5000 I'll go here 5000. 172 00:10:17,710 --> 00:10:20,630 Now if we visit this this is going to be the homepage. 173 00:10:20,670 --> 00:10:26,910 As you can see we are visiting our backend port but we can still get the react application. 174 00:10:26,950 --> 00:10:28,910 It is because we are hitting this. 175 00:10:29,190 --> 00:10:36,310 If check where we say if we are hitting any endpoint other than these, show them the react application. 176 00:10:36,430 --> 00:10:43,230 But if we try to log out then we will send a request to this end point under the oath. 177 00:10:43,510 --> 00:10:45,430 So it just works as expected. 178 00:10:45,430 --> 00:10:48,590 It just runs the controller and log us out. 179 00:10:49,070 --> 00:10:50,630 And now I hope this makes sense. 180 00:10:50,630 --> 00:10:58,110 You can use this logic in all of your incoming projects, where you build and deploy your application 181 00:10:58,270 --> 00:11:01,030 under the server, right under the server. 182 00:11:01,030 --> 00:11:07,910 Basically, you build and install the dependencies for your server, for your client, build your react 183 00:11:07,910 --> 00:11:12,470 application and serve them under the server.js file. 184 00:11:12,950 --> 00:11:16,030 With that in mind, we can initialize a git repo. 185 00:11:16,150 --> 00:11:23,110 I will open up my terminal, kill this and we have some, I think, console logs under the back end. 186 00:11:23,630 --> 00:11:26,910 Let's just see for the auth controllers. 187 00:11:28,950 --> 00:11:31,670 Let's just say console dot log. 188 00:11:33,310 --> 00:11:35,350 If you really want to you could delete them. 189 00:11:35,350 --> 00:11:37,550 Some of them are not really needed. 190 00:11:37,550 --> 00:11:38,910 So let's delete this one. 191 00:11:38,910 --> 00:11:41,020 First we could delete. 192 00:11:41,460 --> 00:11:42,780 This is an error handling. 193 00:11:42,820 --> 00:11:44,100 Maybe we could leave it. 194 00:11:44,100 --> 00:11:45,780 Or maybe we could delete it. 195 00:11:45,820 --> 00:11:47,100 I'll be deleting this. 196 00:11:47,420 --> 00:11:48,580 Deleting this one. 197 00:11:49,700 --> 00:11:53,180 For the search controller we just have the debugging. 198 00:11:53,420 --> 00:11:55,740 I mean like logging for the server. 199 00:11:55,780 --> 00:11:57,540 We could leave them as it is. 200 00:11:58,140 --> 00:11:59,820 Okay, I'll just leave it like this. 201 00:12:00,100 --> 00:12:03,700 Let's try to initialize this as a git repo. 202 00:12:03,740 --> 00:12:10,140 I'll say git init and let's add all of our changes. 203 00:12:10,140 --> 00:12:17,300 Maybe I'll say close all and just make sure that your dot env and node modules are being ignored. 204 00:12:17,300 --> 00:12:18,500 So it is being grayed out. 205 00:12:18,500 --> 00:12:24,060 I can understand they are being ignored and you should make sure that you added this dot env into the 206 00:12:24,060 --> 00:12:24,740 git ignore. 207 00:12:25,580 --> 00:12:25,900 Okay. 208 00:12:25,940 --> 00:12:35,380 So we'll go ahead and maybe say uh git add all and then we'll just say git commit dash m. 209 00:12:35,500 --> 00:12:37,660 I'll just say initial commit. 210 00:12:39,490 --> 00:12:41,650 Okay, so I just committed my changes. 211 00:12:41,690 --> 00:12:45,850 Now what I want to do is just visit the GitHub and push this code. 212 00:12:45,890 --> 00:12:49,730 So now I just want to create a new repo by clicking to this. 213 00:12:49,930 --> 00:12:55,690 Then here let's give it a name I'll say Mern Netflix clone. 214 00:12:55,970 --> 00:12:58,450 And for the description you could leave it empty. 215 00:12:58,490 --> 00:12:59,530 This is optional. 216 00:12:59,810 --> 00:13:01,850 I'll just make it private if you want to. 217 00:13:01,850 --> 00:13:03,730 You could leave it as public. 218 00:13:03,730 --> 00:13:03,970 Right? 219 00:13:03,970 --> 00:13:04,970 I'll go with this one. 220 00:13:04,970 --> 00:13:06,890 And let's say create the repo. 221 00:13:07,610 --> 00:13:10,170 And what I'll be doing is just copy this. 222 00:13:10,330 --> 00:13:10,530 Okay? 223 00:13:10,530 --> 00:13:12,130 Just make sure you copy it. 224 00:13:12,130 --> 00:13:13,690 And we're going to push this. 225 00:13:14,010 --> 00:13:18,130 I'll push an existing code, uh, to this repo that we have. 226 00:13:18,170 --> 00:13:18,610 Right. 227 00:13:19,050 --> 00:13:23,010 I'll open up my terminal and just paste it. 228 00:13:24,290 --> 00:13:24,570 Okay. 229 00:13:24,610 --> 00:13:25,850 I'll just say push. 230 00:13:27,010 --> 00:13:32,890 It should take this code, push it up into our git repo. 231 00:13:34,210 --> 00:13:35,050 Let's refresh. 232 00:13:35,090 --> 00:13:35,730 There we go. 233 00:13:35,890 --> 00:13:38,760 The initial commit has just been done one minute ago. 234 00:13:38,960 --> 00:13:42,880 Now we'll be using render.com to be able to deploy this application. 235 00:13:43,000 --> 00:13:44,760 So let's go ahead and visit it. 236 00:13:47,280 --> 00:13:50,760 If you don't have an account go ahead and create one I already have. 237 00:13:50,800 --> 00:13:53,720 So I'll just log in and go to my dashboard. 238 00:13:53,920 --> 00:13:56,600 I'll say log in with the GitHub account. 239 00:13:58,120 --> 00:13:58,400 Okay. 240 00:13:58,440 --> 00:13:59,480 Now I am logged in. 241 00:13:59,480 --> 00:14:02,480 I'll just say create a new web service. 242 00:14:02,960 --> 00:14:03,960 Let's click it. 243 00:14:06,040 --> 00:14:06,360 Okay. 244 00:14:06,400 --> 00:14:07,920 We would like to deploy this one. 245 00:14:07,920 --> 00:14:10,560 I'm going to be clicking to it let's say connect. 246 00:14:12,000 --> 00:14:15,200 And from here on out let's see it says loading. 247 00:14:15,480 --> 00:14:18,280 We could leave everything as it is for the build command. 248 00:14:18,280 --> 00:14:26,040 It is going to be npm run build and start command is going to be npm run start right? 249 00:14:26,080 --> 00:14:32,240 These are the uh commands that we have added into the package dot JSON file. 250 00:14:32,880 --> 00:14:34,870 So we have Built. 251 00:14:34,910 --> 00:14:38,910 This is going to be installing all the packages and build the front end. 252 00:14:38,950 --> 00:14:42,150 Then uh start is going to start it. 253 00:14:42,830 --> 00:14:43,110 Okay. 254 00:14:43,110 --> 00:14:44,990 This is the things that we just put. 255 00:14:45,030 --> 00:14:46,950 I'd like to go with the free plan. 256 00:14:46,950 --> 00:14:53,390 And the only downside for this is that it just get it just gets um, like inactive. 257 00:14:53,390 --> 00:14:59,350 If you don't visit your website for 15 minutes and once you visit it after 15 minutes, it's going to 258 00:14:59,350 --> 00:15:01,030 take about one minute to load. 259 00:15:01,270 --> 00:15:08,430 Um, I think like it is bad, but for a side project it is not really that much of a problem. 260 00:15:08,590 --> 00:15:16,070 And if you want to get rid of that, you know, uh, inactive state, you could add some kind of cron 261 00:15:16,070 --> 00:15:16,630 jobs. 262 00:15:16,670 --> 00:15:18,470 This is how we type it. 263 00:15:18,470 --> 00:15:23,350 So cron jobs and I have explained these in my previous videos. 264 00:15:23,350 --> 00:15:27,910 You can take a look at the deployment part in the previous Mern stack applications. 265 00:15:28,390 --> 00:15:31,990 So it should take about at most like ten minutes. 266 00:15:32,310 --> 00:15:35,820 I will need to add my environment variables as well. 267 00:15:36,220 --> 00:15:39,020 So I will go ahead and copy this file. 268 00:15:39,060 --> 00:15:42,620 Let's close these or delete these empty places. 269 00:15:43,700 --> 00:15:45,660 Copy it and paste it. 270 00:15:46,700 --> 00:15:49,260 Okay I thought it's going to paste all of them. 271 00:15:49,260 --> 00:15:51,300 But let's just do it manually. 272 00:15:51,820 --> 00:15:53,220 I'll just add one by one. 273 00:15:53,260 --> 00:15:54,260 Mongo Uri. 274 00:15:57,100 --> 00:15:59,100 And then the value for it. 275 00:16:02,460 --> 00:16:04,900 And I'll say add new environment variable. 276 00:16:04,900 --> 00:16:06,020 So I'll be doing this. 277 00:16:06,540 --> 00:16:10,660 Um just pretty quickly let's say port is going to be 5000. 278 00:16:11,620 --> 00:16:13,780 And maybe I could speed up this process now. 279 00:16:16,020 --> 00:16:16,460 Okay. 280 00:16:16,460 --> 00:16:18,980 So these are the environment variables that I have added. 281 00:16:19,020 --> 00:16:25,340 I didn't add the node env because when we run the build command it is already I mean when we run the 282 00:16:25,340 --> 00:16:28,060 start command it is already going to be production. 283 00:16:28,220 --> 00:16:31,490 So I'll just say deploy this web service. 284 00:16:31,730 --> 00:16:35,370 This is going to be taking a bit time, but let's wait for this to complete. 285 00:16:35,410 --> 00:16:37,370 Once this is done, I'll just be right back. 286 00:16:38,210 --> 00:16:39,570 Okay, so there we go. 287 00:16:39,610 --> 00:16:42,250 Without any issues, the build was successful. 288 00:16:42,290 --> 00:16:44,610 It tried to deploy that and here we go. 289 00:16:44,650 --> 00:16:50,170 It just says your service is live and we can see MongoDB connected and server started. 290 00:16:50,210 --> 00:16:55,570 Even though it says localhost but we just got an actual endpoint or a URL. 291 00:16:55,690 --> 00:16:56,850 Let's click to it. 292 00:16:56,890 --> 00:16:58,530 It should take us to this page. 293 00:16:58,690 --> 00:16:59,690 And here we go. 294 00:16:59,730 --> 00:17:00,610 We are here. 295 00:17:00,890 --> 00:17:06,050 Um, for some reason it didn't get the background image. 296 00:17:06,490 --> 00:17:08,730 So maybe we could fix this just in a second. 297 00:17:08,770 --> 00:17:14,090 Let's try to go to the sign in page so we can we cannot still get this. 298 00:17:14,130 --> 00:17:16,370 Um, there might be a issue. 299 00:17:16,410 --> 00:17:17,570 We're going to fix it. 300 00:17:17,610 --> 00:17:19,650 Let's try to sign up here. 301 00:17:19,650 --> 00:17:22,650 I'll just say, um, let's just say I don't know. 302 00:17:22,650 --> 00:17:23,330 For the name. 303 00:17:23,330 --> 00:17:27,490 We could say chris@email.com. 304 00:17:27,610 --> 00:17:28,930 Let's say Chris. 305 00:17:29,200 --> 00:17:34,800 And if we put one, two, three, it should say password must be at least six characters. 306 00:17:34,800 --> 00:17:40,240 Let's put four, five, six and make this to be an email that is already existed. 307 00:17:40,520 --> 00:17:42,920 It should say email exists. 308 00:17:44,120 --> 00:17:46,880 Okay, I think we don't really have that email in the database. 309 00:17:46,880 --> 00:17:48,800 That's why it just logged us in. 310 00:17:49,040 --> 00:17:51,760 Uh, we can test this out again, but there we go. 311 00:17:51,760 --> 00:17:53,920 Now we are in the home page. 312 00:17:54,040 --> 00:17:56,880 We can see the movies, let's say TV shows. 313 00:17:58,480 --> 00:17:58,960 There we go. 314 00:17:59,000 --> 00:18:00,280 It is just being updated. 315 00:18:00,280 --> 00:18:03,040 We can see the TV shows with the categories. 316 00:18:03,560 --> 00:18:05,760 We can scroll to this list. 317 00:18:05,800 --> 00:18:08,520 Let's select any of these TV shows. 318 00:18:08,920 --> 00:18:12,720 It takes us to the watch page where we can see the trailers. 319 00:18:13,040 --> 00:18:20,120 We can navigate them, go forward, go backward and if we are in the first one we cannot go back, right? 320 00:18:20,160 --> 00:18:26,040 We got the detail with the poster path, similar movies or TV shows. 321 00:18:27,000 --> 00:18:28,680 It just works as expected. 322 00:18:28,680 --> 00:18:31,400 Let's try to search for a user. 323 00:18:32,120 --> 00:18:37,240 I'll just say maybe Aaron Paul okay, there we go. 324 00:18:37,280 --> 00:18:38,440 We got this user. 325 00:18:38,480 --> 00:18:41,800 Let's try to search for a TV show. 326 00:18:41,840 --> 00:18:42,960 Let's say how I met. 327 00:18:42,960 --> 00:18:51,240 And it should fetch all the related TV shows, let's say movies extraction and search for it. 328 00:18:51,720 --> 00:18:56,440 Okay, from here we can navigate it, see the watch page trailers. 329 00:18:56,640 --> 00:18:58,200 We can go to the search history. 330 00:18:58,560 --> 00:18:58,960 There we go. 331 00:18:59,000 --> 00:19:00,800 We just got all of our search. 332 00:19:01,360 --> 00:19:02,480 We can delete them. 333 00:19:04,040 --> 00:19:05,480 And it's going to say no. 334 00:19:05,480 --> 00:19:06,840 Search history found. 335 00:19:06,880 --> 00:19:13,160 If we try to go to a page that doesn't exist, it should give us 404 with the image. 336 00:19:13,160 --> 00:19:14,880 And we have the footer as well. 337 00:19:14,880 --> 00:19:18,080 So we have a tiny bit, uh, styling issue. 338 00:19:18,120 --> 00:19:22,120 Maybe you could remove this padding or is it margin bottom? 339 00:19:22,120 --> 00:19:23,640 I don't know, it is pretty basic. 340 00:19:23,680 --> 00:19:25,000 You could remove it. 341 00:19:25,070 --> 00:19:32,830 Um, we can go back to the home page and we can also visit from here. 342 00:19:33,190 --> 00:19:33,750 Right. 343 00:19:33,830 --> 00:19:37,150 So all I, all I am trying to say, it just works as expected. 344 00:19:37,190 --> 00:19:38,870 Let's try to log out. 345 00:19:39,110 --> 00:19:42,790 And for some reason we cannot see this background image. 346 00:19:43,510 --> 00:19:53,190 I think it's because in the front end, um, in the index dot CSS we just say hero dot png. 347 00:19:53,230 --> 00:19:55,950 Maybe this should be slash hero dot png. 348 00:19:56,350 --> 00:20:03,790 What I'll be doing is just open up my terminal and just say npm run build and test this out once again 349 00:20:03,790 --> 00:20:06,510 in my in my local machine. 350 00:20:06,510 --> 00:20:11,030 And if it is working then I'll be deploying this, uh, into the production. 351 00:20:11,030 --> 00:20:11,470 Right? 352 00:20:11,830 --> 00:20:13,510 I'd like to save this file as well. 353 00:20:13,550 --> 00:20:16,950 Let's close this and let's wait for this to complete. 354 00:20:17,630 --> 00:20:17,950 Okay. 355 00:20:17,990 --> 00:20:19,590 So it says it is completed. 356 00:20:19,630 --> 00:20:26,100 Let's just say npm run dev or not dev, but start because now we are in the production. 357 00:20:26,100 --> 00:20:28,180 We would like to see the production build. 358 00:20:28,620 --> 00:20:32,860 Let's visit localhost 5000. 359 00:20:33,540 --> 00:20:35,740 It looks like background image is working. 360 00:20:35,740 --> 00:20:37,220 Now let's try to deploy this. 361 00:20:37,220 --> 00:20:41,020 Once again I will say git add all. 362 00:20:41,180 --> 00:20:45,460 And maybe we could remove this 404 page style. 363 00:20:45,500 --> 00:20:46,620 Let me just fix it. 364 00:20:48,140 --> 00:20:49,780 Um okay. 365 00:20:49,820 --> 00:20:53,260 So we cannot get it because we killed the server. 366 00:20:53,260 --> 00:20:57,340 Let's just start this again and I will refresh this page. 367 00:20:57,540 --> 00:20:57,780 Okay. 368 00:20:57,820 --> 00:21:00,580 Why do we have this styling issue? 369 00:21:00,620 --> 00:21:04,220 Let's go into the not found page. 370 00:21:04,260 --> 00:21:05,980 Did we call it as 404? 371 00:21:06,500 --> 00:21:06,940 Yep. 372 00:21:07,220 --> 00:21:08,540 This is what we have. 373 00:21:08,580 --> 00:21:10,380 Let me just zoom out a little bit. 374 00:21:10,540 --> 00:21:12,060 Shrink this left hand side. 375 00:21:13,180 --> 00:21:15,020 So we say minimum height screen. 376 00:21:15,020 --> 00:21:16,140 Let's delete this. 377 00:21:17,620 --> 00:21:18,020 Um. 378 00:21:20,620 --> 00:21:24,250 So okay um maybe it's because this is positioned. 379 00:21:24,250 --> 00:21:25,050 Absolutely. 380 00:21:25,050 --> 00:21:26,370 Let's delete this for now. 381 00:21:28,250 --> 00:21:29,130 Oh, okay. 382 00:21:29,170 --> 00:21:34,210 So it cannot update even if you refresh this because we are running in the production. 383 00:21:34,330 --> 00:21:38,610 Every time you do a change it is not going to restart this right here. 384 00:21:38,650 --> 00:21:40,970 Just watch me I'll just bring this back. 385 00:21:41,010 --> 00:21:42,050 Bring this back. 386 00:21:42,090 --> 00:21:42,850 Save this. 387 00:21:42,850 --> 00:21:44,410 And it doesn't restart it. 388 00:21:44,450 --> 00:21:47,370 It is because we are in the production environment. 389 00:21:47,410 --> 00:21:53,090 We don't run it with Nodemon, but we run it with node where that is. 390 00:21:53,090 --> 00:21:54,290 Let me just show it. 391 00:21:54,850 --> 00:21:57,570 So since we are running this we call the node. 392 00:21:57,610 --> 00:22:01,930 And this is not going to restart it every time you do a change. 393 00:22:02,210 --> 00:22:07,290 So I think I'll just leave this to you to just, uh, remove this space. 394 00:22:07,850 --> 00:22:09,530 At this point, you should be able to do so. 395 00:22:09,570 --> 00:22:09,970 Right? 396 00:22:10,290 --> 00:22:13,050 I'll say git add all. 397 00:22:13,090 --> 00:22:23,200 Git commit dash m and I'll say index dot css hero bg Fixed and just get push this. 398 00:22:25,160 --> 00:22:25,480 Okay. 399 00:22:25,520 --> 00:22:28,440 So this is going to push this code to the GitHub. 400 00:22:28,680 --> 00:22:33,720 And let's just see the latest commit was just now. 401 00:22:33,720 --> 00:22:36,400 And render is going to see that change. 402 00:22:36,400 --> 00:22:39,240 And it will try to redeploy your application. 403 00:22:39,240 --> 00:22:41,480 So you don't really need to do anything. 404 00:22:41,720 --> 00:22:44,520 It'll take this and try to deploy it. 405 00:22:44,560 --> 00:22:48,960 And you can check your logs and just see if it is going to fail or not. 406 00:22:49,400 --> 00:22:52,560 And once this is done, I'll just be right back to the video. 407 00:22:52,800 --> 00:22:53,160 Okay. 408 00:22:53,200 --> 00:22:55,600 So it just says your service is live. 409 00:22:55,640 --> 00:22:58,000 Server started MongoDB connected. 410 00:22:58,040 --> 00:23:04,840 Let's visit once again and we should be able to get the background both in this page, in the login, 411 00:23:04,840 --> 00:23:06,000 in the sign up. 412 00:23:06,000 --> 00:23:08,600 And we can really try to sign up once again. 413 00:23:08,640 --> 00:23:12,080 Let me just try to sign up with the John email. 414 00:23:12,280 --> 00:23:13,640 I'll just put any name. 415 00:23:13,880 --> 00:23:20,030 If we put this password from 1 to 6 it should say email already exists, right? 416 00:23:20,070 --> 00:23:26,630 But now I can put something like Chris and just say Chris Hemsworth birth. 417 00:23:26,630 --> 00:23:28,230 I think this is the correct name. 418 00:23:28,230 --> 00:23:29,710 Let's just say one, two, three. 419 00:23:30,110 --> 00:23:32,390 Password must be at least six characters. 420 00:23:32,390 --> 00:23:33,950 Let's go from 1 to 6. 421 00:23:34,110 --> 00:23:34,790 Sign up. 422 00:23:35,950 --> 00:23:39,550 We should be able to sign up and it's going to create our account. 423 00:23:40,350 --> 00:23:42,910 Right now we can really navigate everything. 424 00:23:43,190 --> 00:23:46,590 And as I shown you, it just works as expected. 425 00:23:46,910 --> 00:23:50,070 So with this I think this is going to be it for this tutorial. 426 00:23:50,070 --> 00:23:56,470 I think it was helpful where you just learned the fundamentals of Fullstack, where you have your database, 427 00:23:56,470 --> 00:24:02,350 your API, your authentication system, and on the client we had a react application. 428 00:24:02,550 --> 00:24:06,430 Uh, so, you know, like everything that we have built, I hope it was helpful. 429 00:24:06,470 --> 00:24:09,870 Thanks for watching and hopefully I'll see you in the next video. 430 00:24:10,070 --> 00:24:12,190 Okay, so just a quick pause here. 431 00:24:12,190 --> 00:24:17,580 I already said I'll see you in the next one, but there is just one tiny fix that we that we could add 432 00:24:17,620 --> 00:24:22,940 it is that we don't have a loading state when we sign up or when we log in, right? 433 00:24:22,980 --> 00:24:24,340 Let's try to add them. 434 00:24:24,460 --> 00:24:31,580 Even though we created those states, such as in the auth user dot js file we have is signing up, is 435 00:24:31,580 --> 00:24:33,460 logging in, and is logging out. 436 00:24:33,500 --> 00:24:35,780 Let's try to use these states. 437 00:24:35,820 --> 00:24:42,740 If we go into the sign up page well basically we can just grab this state and destructure this and we 438 00:24:42,740 --> 00:24:45,100 can use it in this button. 439 00:24:45,100 --> 00:24:47,460 So instead of just saying sign up let's delete this. 440 00:24:47,460 --> 00:24:52,060 We will say if is signing up then we will just say signing up. 441 00:24:52,060 --> 00:24:53,660 Or let's just say loading. 442 00:24:53,700 --> 00:24:57,780 And we could put three dots and otherwise we will just say sign up. 443 00:24:57,820 --> 00:25:00,980 Let's do the exact same thing in the login page. 444 00:25:01,100 --> 00:25:02,820 I'll go ahead copy this. 445 00:25:02,980 --> 00:25:07,940 And here I'll just say I mean not copy, but we'll go here and copy. 446 00:25:07,940 --> 00:25:09,980 This one is logging in. 447 00:25:10,220 --> 00:25:11,260 Let's paste it. 448 00:25:11,300 --> 00:25:14,900 We could go here and just say loading or. 449 00:25:16,940 --> 00:25:18,660 let's say loading. 450 00:25:19,580 --> 00:25:21,500 Otherwise we'll just say login. 451 00:25:21,500 --> 00:25:25,620 And we could make this button to be disabled if we are logging in. 452 00:25:25,780 --> 00:25:28,300 And let's do the same thing for the sign up page. 453 00:25:28,500 --> 00:25:31,900 This button is going to be disabled if we are signing up. 454 00:25:32,140 --> 00:25:32,460 Okay. 455 00:25:32,500 --> 00:25:34,500 These are the things that I just wanted to add. 456 00:25:34,620 --> 00:25:38,580 And if you want to use this logging out state you could also use it. 457 00:25:38,580 --> 00:25:43,740 But logging out is going to be super fast, so I just don't even want to use it. 458 00:25:43,780 --> 00:25:46,900 I'll just leave it here in case you want to use it. 459 00:25:47,100 --> 00:25:50,020 But as I said, I'm not going to be using it. 460 00:25:50,060 --> 00:25:56,140 And the very last thing I just want to update is going to be the scroll bar that we have in this application. 461 00:25:56,220 --> 00:25:57,940 So let's go into the homepage. 462 00:25:58,060 --> 00:26:03,460 We see this scroll bar is fine but we could really make it a little bit better. 463 00:26:03,700 --> 00:26:08,900 So I'll go into the index dot CSS and I'll provide you a couple of lines of code. 464 00:26:10,780 --> 00:26:15,770 So basically we will have a dark mode rounded scroll bar. 465 00:26:16,330 --> 00:26:18,570 So just like this, this is what we have. 466 00:26:18,610 --> 00:26:25,050 We change the width scroll bar, thumb background color and border radius as well as the scroll bar 467 00:26:25,090 --> 00:26:25,690 track. 468 00:26:25,970 --> 00:26:28,090 Let's save and just test this out. 469 00:26:28,130 --> 00:26:28,610 There we go. 470 00:26:28,650 --> 00:26:32,770 Now we have this scroll bar, um, on the right hand side. 471 00:26:32,770 --> 00:26:34,650 And it is a little bit more elegant. 472 00:26:35,050 --> 00:26:37,930 And let's try to just log in or sign up. 473 00:26:37,970 --> 00:26:41,330 I'll say, I don't know, just put something random. 474 00:26:41,330 --> 00:26:46,570 I'll say Jesse 123 at gmail.com. 475 00:26:46,610 --> 00:26:49,970 And for the username let's say Jesse 123. 476 00:26:50,330 --> 00:26:52,330 123456. 477 00:26:52,370 --> 00:26:55,330 If I click this, I should have a loading state. 478 00:26:55,850 --> 00:26:56,810 Okay, there we go. 479 00:26:56,850 --> 00:27:03,650 Now we are logged in account created successfully and it should have the exact same state in the login. 480 00:27:03,650 --> 00:27:07,170 Let's just try to do so 123456. 481 00:27:07,450 --> 00:27:08,010 There we go. 482 00:27:08,010 --> 00:27:09,690 It just works as expected. 483 00:27:09,730 --> 00:27:10,130 Okay. 484 00:27:10,170 --> 00:27:12,480 So these are going to be the be the changes that we have. 485 00:27:12,520 --> 00:27:16,760 Now, I'll just go ahead and kill the terminal and push this to the repo. 486 00:27:16,800 --> 00:27:22,960 I'll just say CD up and git add all, which we have three different changes. 487 00:27:23,480 --> 00:27:25,720 One of them is under the index dot CSS. 488 00:27:25,760 --> 00:27:28,160 We added the web kit for the web. 489 00:27:28,200 --> 00:27:30,400 I mean for the scroll bar styles. 490 00:27:30,440 --> 00:27:34,800 We added the logging in state as well as the signing up state. 491 00:27:34,800 --> 00:27:35,920 So these are the changes. 492 00:27:35,960 --> 00:27:40,800 Let's say git commit dash m which stands for message. 493 00:27:40,800 --> 00:27:47,040 And let's say loading states added and just commit. 494 00:27:47,040 --> 00:27:47,920 This changes. 495 00:27:48,080 --> 00:27:53,840 And finally I'll just say git push so that it could deploy the latest change that we have. 496 00:27:54,200 --> 00:27:55,960 So this is going to do the magic. 497 00:27:55,960 --> 00:27:57,240 Let's take a look at the render. 498 00:27:57,240 --> 00:28:01,440 If we go into the dashboard it should be able to deploy this from scratch. 499 00:28:01,560 --> 00:28:05,360 So it is going to be working the exact same way in the production. 500 00:28:05,360 --> 00:28:08,720 And with this I think this is going to be the actual time. 501 00:28:08,720 --> 00:28:10,240 I will see you in the next one.