1 00:00:00,320 --> 00:00:03,000 Now we would like to deploy our application. 2 00:00:03,000 --> 00:00:06,880 And for this we need to configure this server.js file. 3 00:00:07,080 --> 00:00:10,280 And this is the current state of our application right. 4 00:00:10,320 --> 00:00:16,960 We are running the server under the localhost 5000 and client under the 5173. 5 00:00:17,240 --> 00:00:24,240 What I really want to do is actually take the client also serve it under the same, uh, domain. 6 00:00:24,240 --> 00:00:24,640 Right. 7 00:00:24,680 --> 00:00:27,040 I don't really want to run this separately. 8 00:00:27,360 --> 00:00:30,680 So how can we make this happen and why are we doing this? 9 00:00:30,720 --> 00:00:34,280 Well, the first reason is just to have an easier deployment. 10 00:00:34,280 --> 00:00:36,880 So this is kind of like the monorepo setup. 11 00:00:36,920 --> 00:00:40,200 And we don't really want to handle the course errors. 12 00:00:40,240 --> 00:00:40,440 Right. 13 00:00:40,480 --> 00:00:47,120 So we can just get rid of this immediately because we are serving the API as well as the client under 14 00:00:47,120 --> 00:00:48,360 the same domain. 15 00:00:48,800 --> 00:00:49,080 Okay. 16 00:00:49,120 --> 00:00:54,480 So with that in mind now let's go ahead and take the client and make sure it is also being served under 17 00:00:54,480 --> 00:00:56,600 the same domain that we have. 18 00:00:57,360 --> 00:00:57,680 Okay. 19 00:00:57,720 --> 00:01:04,300 So we're going to go ahead and have a variable Well, maybe down here I'll say const underscore underscore 20 00:01:04,620 --> 00:01:08,220 their name and we'll say path dot resolve. 21 00:01:08,380 --> 00:01:11,580 And make sure you import the path from path. 22 00:01:11,620 --> 00:01:12,420 I'll just go ahead. 23 00:01:12,460 --> 00:01:13,620 Put it up here. 24 00:01:14,620 --> 00:01:15,100 Okay. 25 00:01:15,140 --> 00:01:16,420 Now we'll be using this. 26 00:01:16,420 --> 00:01:19,500 But we will only be using this in the production. 27 00:01:19,500 --> 00:01:20,020 Right. 28 00:01:20,060 --> 00:01:24,260 So I'd like to have a node env where we already have it. 29 00:01:24,260 --> 00:01:34,940 And we will just say after these API routes if the process dot env dot uh node underscore env if it 30 00:01:34,940 --> 00:01:42,060 is equal to production, we would like to serve the react application under the uh under this port. 31 00:01:42,100 --> 00:01:42,540 Right. 32 00:01:43,580 --> 00:01:46,420 So we'll go ahead and just say app dot use. 33 00:01:46,460 --> 00:01:52,580 And we would like to make our client uh directory to be static assets. 34 00:01:52,700 --> 00:01:59,380 And when we uh build this react application we're going to get a dist folder which is the optimized 35 00:01:59,380 --> 00:02:04,720 version of our react application, so we would like to find it and make it to be static. 36 00:02:04,880 --> 00:02:07,240 So we'll say express dot static. 37 00:02:07,280 --> 00:02:10,400 And now we can use that path module. 38 00:02:10,400 --> 00:02:12,360 So we'll just say path dot join. 39 00:02:12,400 --> 00:02:18,320 And we would like to say underscore underscore their name which means that we are in the root okay. 40 00:02:18,360 --> 00:02:19,200 We are here. 41 00:02:19,240 --> 00:02:22,840 We would like to go under the client and find the dist folder. 42 00:02:23,240 --> 00:02:25,080 Currently we don't have the dist folder. 43 00:02:25,080 --> 00:02:29,000 But if we run npm run build we are going to get it. 44 00:02:29,040 --> 00:02:31,360 And this is what will happen in the production. 45 00:02:31,360 --> 00:02:36,320 So we'll just say from the root, go under the client and find the dist folder. 46 00:02:36,360 --> 00:02:40,080 Right now we just made it to be our static assets. 47 00:02:40,240 --> 00:02:47,240 And then we'll say if we visit let's say app dot get um any routes right. 48 00:02:47,400 --> 00:02:53,520 Any routes other than these we would like to, uh, return our react application. 49 00:02:53,520 --> 00:02:55,840 So we'll just say request and response. 50 00:02:57,520 --> 00:03:00,470 We would like to say rest dot send sent file. 51 00:03:00,470 --> 00:03:03,310 And we would like to put that path to the file. 52 00:03:03,310 --> 00:03:05,630 So it's going to be path dot resolve. 53 00:03:05,630 --> 00:03:09,990 And we are going to go ahead and find the use the Dirname variable. 54 00:03:09,990 --> 00:03:14,950 And from here we would like to go under the client into the test. 55 00:03:15,110 --> 00:03:19,670 And there will be an index dot HTML file that we would like to serve. 56 00:03:19,670 --> 00:03:23,430 And this will be our optimized version of our react application. 57 00:03:23,790 --> 00:03:25,550 So with this that should be it. 58 00:03:25,670 --> 00:03:30,190 And the only thing that we are missing is going to be our scripts. 59 00:03:30,750 --> 00:03:33,630 So here we are running this in the development. 60 00:03:33,630 --> 00:03:37,830 But now in the production we need to build this entire application. 61 00:03:38,110 --> 00:03:45,110 And what do we want to do first I just have a build command and we would like to install all of our 62 00:03:45,110 --> 00:03:47,230 dependencies for the backend. 63 00:03:47,550 --> 00:03:52,950 Then we would like to install our dependencies but for the client. 64 00:03:52,990 --> 00:03:56,270 So we'll just say dash dash prefix client. 65 00:03:56,430 --> 00:04:02,890 So this basically tells our run this command, but make sure you're under the client folder. 66 00:04:03,330 --> 00:04:08,490 And then once we run this, finally, we'd like to build our react application. 67 00:04:08,490 --> 00:04:13,250 So we'll just say end npm run build. 68 00:04:15,010 --> 00:04:21,250 And let me just shrink this so that we can see the entire line and dash dash prefix client. 69 00:04:21,250 --> 00:04:25,050 So again this says build the client application. 70 00:04:25,290 --> 00:04:33,370 Then if we want to start this in the production we will just have node um let's say api server dot js. 71 00:04:33,690 --> 00:04:36,210 Run this file but not with Nodemon. 72 00:04:36,450 --> 00:04:36,610 Uh. 73 00:04:36,610 --> 00:04:39,210 Instead just run it with the node. 74 00:04:39,450 --> 00:04:42,210 So that should be it for the deployment setup. 75 00:04:42,650 --> 00:04:44,770 We have a to do I believe. 76 00:04:45,050 --> 00:04:46,210 Let's take a look at it. 77 00:04:46,530 --> 00:04:46,930 Yes. 78 00:04:46,930 --> 00:04:47,570 There we go. 79 00:04:47,810 --> 00:04:51,250 Now in the Axios instance we are using the localhost. 80 00:04:51,250 --> 00:04:54,610 But in the production there is not going to be any localhost. 81 00:04:54,650 --> 00:04:55,170 Right. 82 00:04:55,210 --> 00:04:57,290 So we can make this to be dynamic. 83 00:04:57,570 --> 00:05:00,670 I'll go ahead and delete this to do and just have a variable. 84 00:05:00,710 --> 00:05:04,070 I'll say base underscore URL. 85 00:05:04,270 --> 00:05:06,590 And this is going to be dynamic. 86 00:05:06,590 --> 00:05:12,910 So we'll say if we are in the development that could be localhost 5000 slash API. 87 00:05:13,430 --> 00:05:18,670 So I'll just say import dot meta dot env dot mode. 88 00:05:18,910 --> 00:05:23,230 If this is equal to development make sure it is all lowercase. 89 00:05:23,630 --> 00:05:27,990 So development in this case we can go ahead grab this dude. 90 00:05:29,790 --> 00:05:36,550 But if it is production then this is going to be whatever the current URL is slash API right. 91 00:05:36,590 --> 00:05:40,310 So we just make this part to be dynamic okay. 92 00:05:40,550 --> 00:05:41,830 Then we're going to go ahead. 93 00:05:41,870 --> 00:05:43,430 Take this paste it here. 94 00:05:43,710 --> 00:05:51,670 And this is that to do we need to do the same thing for the socket client file I believe okay. 95 00:05:51,710 --> 00:05:54,430 So socket URL is not going to be this. 96 00:05:54,550 --> 00:06:00,730 But instead I will say if we are in the development Then it will be this. 97 00:06:00,730 --> 00:06:01,530 But else. 98 00:06:02,050 --> 00:06:06,530 Um, this is just going to be slash, let's say. 99 00:06:06,850 --> 00:06:09,490 Um, I think this should be slash. 100 00:06:09,530 --> 00:06:09,970 Yep. 101 00:06:10,090 --> 00:06:16,650 Because, uh, this says whatever the current, uh, your, whatever the current URL is. 102 00:06:16,650 --> 00:06:17,090 Right. 103 00:06:17,130 --> 00:06:21,210 This would be our server, and I think that should be it. 104 00:06:21,850 --> 00:06:23,090 We would like to deploy this. 105 00:06:23,090 --> 00:06:29,890 And for this we're going to be using a platform called render com which is completely free to get started 106 00:06:29,890 --> 00:06:30,370 with. 107 00:06:30,530 --> 00:06:34,810 They have paid plans, but um, they have a free plan as well. 108 00:06:35,050 --> 00:06:37,890 So we can go ahead and log in with our GitHub account. 109 00:06:39,450 --> 00:06:41,650 Uh, let me just do this and come back to the video. 110 00:06:41,970 --> 00:06:42,330 Okay. 111 00:06:42,330 --> 00:06:43,410 So I just logged in. 112 00:06:43,410 --> 00:06:44,610 This is my dashboard. 113 00:06:44,650 --> 00:06:46,450 You might not have any projects. 114 00:06:46,450 --> 00:06:50,490 This is the one that I have tested out before recording this video. 115 00:06:50,610 --> 00:06:51,850 Uh, just ignore this. 116 00:06:51,890 --> 00:06:54,490 We are going to go ahead and create a new one. 117 00:06:54,490 --> 00:06:59,510 But first we need to push this code to our GitHub account. 118 00:06:59,550 --> 00:07:00,150 Right? 119 00:07:00,230 --> 00:07:05,430 So I will be like I'll go ahead and create a git ignore file here. 120 00:07:05,630 --> 00:07:10,070 Instead of creating maybe I can take this dude, put it into the root. 121 00:07:10,950 --> 00:07:18,950 And what I need to do is just add a dot env into this file because it doesn't it doesn't include it. 122 00:07:19,870 --> 00:07:23,310 Okay, so now let's just try to add all of our changes. 123 00:07:23,750 --> 00:07:26,510 Now we can just say git init. 124 00:07:29,470 --> 00:07:32,390 So here we can see it has been initialized. 125 00:07:32,390 --> 00:07:35,510 And we can just say git add all. 126 00:07:35,950 --> 00:07:40,750 Um let's say git commit dash m. 127 00:07:41,030 --> 00:07:44,870 Let's just say project completed. 128 00:07:46,310 --> 00:07:49,790 And I think we can just commit this message. 129 00:07:49,830 --> 00:07:52,310 Now we'd like to push this code to the GitHub. 130 00:07:52,310 --> 00:07:55,110 So let's go ahead and log in to our GitHub account. 131 00:07:55,870 --> 00:07:59,900 Okay so I just logged in and I want to want to create a new repository. 132 00:08:00,060 --> 00:08:04,540 I will just call this as Tinder clone and I'll make this private. 133 00:08:04,540 --> 00:08:07,620 But after I publish this video, I'll make it public. 134 00:08:07,620 --> 00:08:10,500 So if you want to, you can go with the public option. 135 00:08:10,500 --> 00:08:14,500 I'll go with the private one then let's say create the repo. 136 00:08:14,900 --> 00:08:18,100 We already have a repo in our local machine. 137 00:08:18,140 --> 00:08:20,220 Instead we would like to push this right. 138 00:08:20,260 --> 00:08:23,780 So I'll copy this and paste it into my terminal. 139 00:08:25,140 --> 00:08:28,980 Hopefully our code should be on GitHub. 140 00:08:31,020 --> 00:08:31,900 Let's refresh. 141 00:08:32,620 --> 00:08:33,180 There we go. 142 00:08:33,220 --> 00:08:38,100 We got everything, but we don't have nodemodules or the dot env because they have been ignored. 143 00:08:38,300 --> 00:08:41,260 So we're going to go ahead into the render dashboard. 144 00:08:41,300 --> 00:08:43,900 I will say add a new web service. 145 00:08:45,900 --> 00:08:48,820 And we're going to get it from our git provider. 146 00:08:48,980 --> 00:08:52,780 And this should be the one that we have just added seconds ago. 147 00:08:53,140 --> 00:08:54,660 So let's connect to this. 148 00:08:55,620 --> 00:09:04,480 And now we need to add our scripts, which was the start, start and build script. 149 00:09:05,360 --> 00:09:06,400 So let's scroll. 150 00:09:06,440 --> 00:09:09,200 Do not change anything above for the build command. 151 00:09:09,240 --> 00:09:18,200 We would like to say npm run build and for the start command we'll just say npm run start and select 152 00:09:18,200 --> 00:09:24,880 the free plan so that we don't really pay anything, even though it has a disadvantage of like it just 153 00:09:25,120 --> 00:09:29,800 goes into the inactive mode if you don't visit it for 15 minutes. 154 00:09:29,840 --> 00:09:33,640 But I think that's completely fine, uh, for a site project. 155 00:09:33,800 --> 00:09:36,440 And now we would like to add our environment variables. 156 00:09:36,760 --> 00:09:38,480 So you can add it one by one. 157 00:09:38,720 --> 00:09:47,920 But the better option is to copy all of them and click to this add uh from dot env file and paste it. 158 00:09:48,760 --> 00:09:49,600 Make this bigger. 159 00:09:49,600 --> 00:09:51,400 And we're going to go step by step. 160 00:09:51,600 --> 00:09:56,160 So we have a port mongo uri jwt secret node env. 161 00:09:56,320 --> 00:09:57,360 We can delete this. 162 00:09:57,360 --> 00:09:57,420 Litres. 163 00:09:57,820 --> 00:10:02,100 It will understand that it is in the production because we are deploying it, right? 164 00:10:02,140 --> 00:10:06,500 Then we have cloudinary secrets and now we don't have a localhost. 165 00:10:06,500 --> 00:10:09,420 So for now we're going to go ahead and delete the client URL. 166 00:10:09,660 --> 00:10:13,820 When we deploy this we're going to get a URL from render. 167 00:10:13,820 --> 00:10:16,300 And then we will update it with that. 168 00:10:16,340 --> 00:10:19,940 So for now just leave it an empty string like this. 169 00:10:20,140 --> 00:10:21,780 Let's say add variables. 170 00:10:22,500 --> 00:10:25,140 And we can say deploy the web service. 171 00:10:25,180 --> 00:10:25,500 Okay. 172 00:10:25,540 --> 00:10:27,300 So here it says it is required. 173 00:10:27,340 --> 00:10:28,460 Let's just say test. 174 00:10:30,260 --> 00:10:30,740 Okay. 175 00:10:30,980 --> 00:10:33,740 Now we'll just deploy this in the first time. 176 00:10:33,780 --> 00:10:37,860 Uh it is not going to work because we need to update the client URL. 177 00:10:38,060 --> 00:10:40,540 But this should be deployed successfully. 178 00:10:41,020 --> 00:10:42,180 So let's wait for this. 179 00:10:42,180 --> 00:10:43,700 This is going to take a couple of time. 180 00:10:43,900 --> 00:10:45,300 Uh, I mean, a couple of minutes. 181 00:10:45,700 --> 00:10:46,980 Then I'll just be right back. 182 00:10:47,660 --> 00:10:47,980 Okay. 183 00:10:47,980 --> 00:10:50,620 So it looks like build was successful. 184 00:10:50,940 --> 00:10:56,380 It connected to the MongoDB server started, and now it should say your service is live. 185 00:10:56,420 --> 00:10:56,980 There we go. 186 00:10:57,020 --> 00:10:57,720 It is. 187 00:10:58,480 --> 00:10:59,240 It is life. 188 00:10:59,520 --> 00:11:00,880 Now we got a URL. 189 00:11:00,920 --> 00:11:01,880 Let's click to it. 190 00:11:02,000 --> 00:11:04,400 Um, it should take us to the application. 191 00:11:04,440 --> 00:11:06,080 Like, even though it looks like it is working. 192 00:11:06,080 --> 00:11:11,280 If you try to log in, it is not going to work, right because the client URL is missing. 193 00:11:11,280 --> 00:11:17,280 So we need to copy this, go into the environment and update this client URL. 194 00:11:17,480 --> 00:11:21,280 So let's say edit for now we have the test. 195 00:11:21,320 --> 00:11:23,880 Let's update it with the actual client URL. 196 00:11:24,160 --> 00:11:27,800 And let's say save, rebuild and deploy. 197 00:11:28,480 --> 00:11:31,040 So again this will take a couple of minutes. 198 00:11:31,680 --> 00:11:33,440 Then it should be good to go. 199 00:11:33,840 --> 00:11:36,000 So here it is deploying once again. 200 00:11:37,640 --> 00:11:39,240 So let's wait for this to complete. 201 00:11:39,240 --> 00:11:41,000 And then I'll just be right back. 202 00:11:41,280 --> 00:11:43,160 So in my case it is failed. 203 00:11:43,160 --> 00:11:45,800 And it is not related to our application. 204 00:11:45,800 --> 00:11:47,280 It is related to render. 205 00:11:47,280 --> 00:11:56,480 Com here you can see it says uh just exited with status code of one which means failure and like internal 206 00:11:56,480 --> 00:11:57,340 system error. 207 00:11:57,580 --> 00:11:59,380 So this is related to render. 208 00:11:59,380 --> 00:12:01,620 We just need to go ahead and deploy this again. 209 00:12:01,660 --> 00:12:03,660 Probably in your case it worked out. 210 00:12:03,700 --> 00:12:06,180 But in my case it didn't for some reason. 211 00:12:06,420 --> 00:12:08,260 Um I'll just go ahead. 212 00:12:08,300 --> 00:12:15,060 Just say maybe manual deploy deploy the latest commit okay. 213 00:12:15,100 --> 00:12:21,300 So this will just try this out once again and I'll be right back okay. 214 00:12:21,340 --> 00:12:22,780 So this time it worked. 215 00:12:22,820 --> 00:12:24,820 Now it says your service is live. 216 00:12:25,060 --> 00:12:28,180 Let's go ahead and try to log in. 217 00:12:28,180 --> 00:12:30,860 So I already had an account called Bob Doe. 218 00:12:31,540 --> 00:12:33,340 Let's put the wrong password. 219 00:12:34,660 --> 00:12:36,100 It should say invalid. 220 00:12:36,100 --> 00:12:40,460 But now if I put the correct one I should be okay. 221 00:12:40,500 --> 00:12:42,220 So why this didn't work? 222 00:12:42,220 --> 00:12:45,500 Let's just say maybe the email address is wrong. 223 00:12:45,500 --> 00:12:45,860 I don't know. 224 00:12:45,900 --> 00:12:49,060 Let's say 123456. 225 00:12:49,260 --> 00:12:50,700 Again it's the same password. 226 00:12:50,700 --> 00:12:52,620 But okay. 227 00:12:52,660 --> 00:12:54,460 So I'll just go ahead, create a new account. 228 00:12:54,740 --> 00:12:57,560 Let's say um Uh, I don't know. 229 00:12:57,880 --> 00:13:03,840 Let's say Beth Doe and just give it an email address. 230 00:13:03,840 --> 00:13:07,160 Beth at example.com. 231 00:13:07,440 --> 00:13:10,000 Password could be from 1 to 6. 232 00:13:12,400 --> 00:13:14,360 Email and mail let's say. 233 00:13:14,680 --> 00:13:14,920 Okay. 234 00:13:14,960 --> 00:13:16,840 We'll just sign up. 235 00:13:16,840 --> 00:13:18,200 Let me just fix the name. 236 00:13:20,360 --> 00:13:20,560 Okay. 237 00:13:20,560 --> 00:13:21,960 This should be 22. 238 00:13:22,000 --> 00:13:22,600 My bad. 239 00:13:22,760 --> 00:13:25,560 The password should be 123456. 240 00:13:27,200 --> 00:13:28,000 Okay, there we go. 241 00:13:28,040 --> 00:13:29,680 Account has been created. 242 00:13:29,720 --> 00:13:32,600 Now I will go ahead and try to update my profile. 243 00:13:32,880 --> 00:13:34,360 Let me just upload an image. 244 00:13:36,400 --> 00:13:39,240 So I will go ahead and select I don't know this one. 245 00:13:39,760 --> 00:13:45,120 And let's just say um coffee addict. 246 00:13:45,840 --> 00:13:50,480 And let's just say age will be 23. 247 00:13:50,880 --> 00:13:51,560 Save. 248 00:13:53,480 --> 00:13:54,400 And here we go. 249 00:13:54,440 --> 00:13:55,640 Everything has been updated. 250 00:13:55,640 --> 00:13:59,350 We can refresh and we will have this same information. 251 00:13:59,630 --> 00:14:03,670 Now I'll go ahead and, uh, sign up with a different account. 252 00:14:05,190 --> 00:14:17,710 So this time, let's have Walt Doe and Walt and example.com password could be from 1 to 6, age could 253 00:14:17,710 --> 00:14:18,870 be 32. 254 00:14:18,990 --> 00:14:21,350 Let's say male female. 255 00:14:21,710 --> 00:14:22,310 Sign up. 256 00:14:22,710 --> 00:14:25,670 And now we'll try to match these two users. 257 00:14:26,150 --> 00:14:28,070 Let me just put them side by side. 258 00:14:28,230 --> 00:14:28,550 Okay. 259 00:14:28,590 --> 00:14:30,430 So I'll go into my home page. 260 00:14:32,270 --> 00:14:33,150 We have the Walt. 261 00:14:33,190 --> 00:14:37,870 Let me just give him a profile image as well so that it looks clean. 262 00:14:41,950 --> 00:14:42,190 Okay. 263 00:14:42,190 --> 00:14:43,350 So this has been updated. 264 00:14:43,350 --> 00:14:46,990 Let's refresh for this user so that they can see the latest image. 265 00:14:46,990 --> 00:14:47,630 There we go. 266 00:14:47,830 --> 00:14:51,950 I will take this to the right and take this one to the right. 267 00:14:53,750 --> 00:14:54,310 Okay. 268 00:14:54,470 --> 00:14:54,950 There we go. 269 00:14:54,990 --> 00:14:59,290 We just got a new match, even though there was a bit delay because this has been deployed. 270 00:14:59,330 --> 00:15:04,650 It'll take a bit time to go back to the database, come back to the ticket server, things like that. 271 00:15:04,650 --> 00:15:11,130 And now if we take a look at it here, they got the, uh, matches instantly. 272 00:15:11,410 --> 00:15:13,610 Let's send some match messages. 273 00:15:14,010 --> 00:15:17,970 I'll just say, hey, Walt, send it. 274 00:15:17,970 --> 00:15:18,650 There we go. 275 00:15:18,690 --> 00:15:22,010 We can just send some more messages. 276 00:15:25,650 --> 00:15:29,650 As you can see, it just works out in real time without any issues. 277 00:15:30,010 --> 00:15:32,130 And it is completely responsive. 278 00:15:32,170 --> 00:15:33,250 Let's test this out. 279 00:15:35,650 --> 00:15:38,770 So this is what we have for the chat page. 280 00:15:40,970 --> 00:15:41,490 Right. 281 00:15:42,010 --> 00:15:43,290 We can go to the home page. 282 00:15:43,290 --> 00:15:45,410 It also works out without any issues. 283 00:15:45,810 --> 00:15:52,130 We can swipe to the right to the left and everything is working as expected. 284 00:15:52,890 --> 00:15:54,930 So that's gonna be it for this project. 285 00:15:54,930 --> 00:15:56,570 I think I'll see you in the next one.