1
00:00:00,200 --> 00:00:03,080
Now we would like to go into the server.js.

2
00:00:03,400 --> 00:00:07,040
Now let's try to make this production ready so that we could deploy that.

3
00:00:07,040 --> 00:00:08,240
And what I mean by that.

4
00:00:08,240 --> 00:00:17,880
So when we visit, let's say our backend URL or domain, we would like to both run the client from here

5
00:00:17,880 --> 00:00:20,080
and the server.

6
00:00:20,280 --> 00:00:20,760
Okay.

7
00:00:20,800 --> 00:00:25,600
So when we visit this route we should be able to see the homepage from our front end.

8
00:00:25,640 --> 00:00:31,840
And if we visit a route like login, we should be able to see the login page or the sign up page.

9
00:00:31,880 --> 00:00:32,960
So on and so forth.

10
00:00:33,120 --> 00:00:39,840
But if we send a request to these endpoints, then it should give us the endpoint result that we have

11
00:00:39,840 --> 00:00:41,200
in our controllers.

12
00:00:41,200 --> 00:00:45,760
So to be able to do this we need to make a couple of things.

13
00:00:45,800 --> 00:00:49,200
But even before that let's just optimize this port first.

14
00:00:49,240 --> 00:00:52,640
Let's say this is going to be the for the port variable.

15
00:00:52,920 --> 00:00:55,280
We would like to get it from Process.env.

16
00:00:55,560 --> 00:00:59,000
And if this is not available that's going to be this value.

17
00:00:59,160 --> 00:01:04,930
Let's make this backticks and then just put that dynamic port.

18
00:01:07,890 --> 00:01:08,290
Okay.

19
00:01:08,330 --> 00:01:12,050
So let's go into the dot env file and create that port.

20
00:01:13,130 --> 00:01:14,530
That should be uppercase.

21
00:01:14,530 --> 00:01:16,930
And then like this.

22
00:01:17,410 --> 00:01:21,490
So with that in place let's try to do uh what I just mentioned.

23
00:01:21,530 --> 00:01:25,290
We would like to run the server and client at the same domain.

24
00:01:25,610 --> 00:01:28,010
So here I will create a variable.

25
00:01:28,210 --> 00:01:31,850
I'll say const underscore underscore their name.

26
00:01:32,170 --> 00:01:34,650
And that's going to be path dot resolve.

27
00:01:34,970 --> 00:01:39,810
Now let's import the path from path which is coming from node js.

28
00:01:40,010 --> 00:01:44,010
And if you console log this so I'll say dirname.

29
00:01:45,970 --> 00:01:47,490
Open up our terminal.

30
00:01:47,530 --> 00:01:51,690
Now this is the root route that we have in our application right.

31
00:01:51,730 --> 00:01:57,170
We are not under the front end or back end, but we are just exactly at this point.

32
00:01:57,250 --> 00:02:04,060
And from here we like to go into the front end to run our react application.

33
00:02:04,260 --> 00:02:11,700
So after these routes I'll just say app dot use and we'll call express dot static.

34
00:02:11,860 --> 00:02:14,220
And we're going to just join this path.

35
00:02:14,540 --> 00:02:17,540
So let's say path dot join.

36
00:02:19,700 --> 00:02:25,100
And now here we'll just say underscore and dirname variable that we have which is we are in the root.

37
00:02:25,140 --> 00:02:28,420
And we'd like to go under the front end folder.

38
00:02:28,420 --> 00:02:34,100
And then we're going to have the dist folder not the build but that should be dist.

39
00:02:34,260 --> 00:02:39,140
And this is what we have got when we build our front end application.

40
00:02:39,140 --> 00:02:43,900
And that's what we'll be doing in our, uh, when we deploy our application as well.

41
00:02:43,940 --> 00:02:49,500
Now these are our static assets and let's add our other routes other than these.

42
00:02:49,540 --> 00:02:55,460
So that's going to be like our login page, the home page or any other route that we have in our front

43
00:02:55,460 --> 00:02:55,820
end.

44
00:02:56,060 --> 00:03:03,550
So I will say app dot get and we'll just put a star or asterisks, which means the wild card.

45
00:03:03,910 --> 00:03:07,310
So request and response.

46
00:03:08,510 --> 00:03:15,190
So when we hit any other routes other than these, we're going to send a file from our react application.

47
00:03:15,190 --> 00:03:20,630
So rest that send file and would like to say path.join their name.

48
00:03:20,630 --> 00:03:23,790
And I'll just make it um comma separated.

49
00:03:23,790 --> 00:03:25,750
So under the front end.

50
00:03:27,990 --> 00:03:34,230
And then comma we'll click to go under the dist and then the index dot HTML file.

51
00:03:34,790 --> 00:03:37,310
And this will be our react application.

52
00:03:37,310 --> 00:03:38,390
So let's save.

53
00:03:38,390 --> 00:03:41,070
And we'd like to just delete this for the homepage.

54
00:03:41,070 --> 00:03:44,110
We don't want to get this server is ready message.

55
00:03:44,110 --> 00:03:47,790
But instead we'd like to have the homepage from our front end.

56
00:03:47,830 --> 00:03:49,230
So I'll delete this part.

57
00:03:49,390 --> 00:03:52,430
And if we save hopefully that's going to work.

58
00:03:52,590 --> 00:03:55,910
I will kill this terminal and then the front end as well.

59
00:03:56,630 --> 00:03:59,320
And in our, uh, server.

60
00:03:59,360 --> 00:04:04,040
I'll just say npm run dev and let's try to test it out.

61
00:04:04,720 --> 00:04:07,520
We got the server is running MongoDB connected.

62
00:04:08,000 --> 00:04:14,440
And here we can see now we're going to go into the localhost uh 5000 which is our server.

63
00:04:14,600 --> 00:04:18,120
But here we can see we have we are in the home page.

64
00:04:18,160 --> 00:04:21,880
If we visit a page like login first we need to log out.

65
00:04:23,400 --> 00:04:25,160
Um okay.

66
00:04:25,200 --> 00:04:29,880
So this is not working as expected because we didn't build our application.

67
00:04:29,880 --> 00:04:30,360
Right.

68
00:04:30,560 --> 00:04:34,920
We don't have the latest version of our react application.

69
00:04:34,920 --> 00:04:37,720
And that's why we see this boilerplate.

70
00:04:37,920 --> 00:04:43,080
Um, so the hardcoded value, we cannot log in, log out or anything like that.

71
00:04:43,120 --> 00:04:48,160
Let's go ahead and run this npm run build in our front end.

72
00:04:50,720 --> 00:04:56,640
So npm run build to get the latest build of our front end application.

73
00:05:03,970 --> 00:05:05,610
Okay, so it has been completed.

74
00:05:05,610 --> 00:05:07,930
It is built in seven seconds.

75
00:05:08,690 --> 00:05:12,090
Now let's kill the back end or we already killed it.

76
00:05:12,090 --> 00:05:18,170
Let's say npm run dev so that we could just get the latest version.

77
00:05:18,690 --> 00:05:21,490
I'll refresh and now we are logged out.

78
00:05:21,530 --> 00:05:23,130
If we try to log in.

79
00:05:28,490 --> 00:05:31,530
So here it says this site can't be reached.

80
00:05:31,530 --> 00:05:34,490
And it is because we need to update this OAuth.

81
00:05:35,010 --> 00:05:42,170
Um so this homepage URL now we don't have this homepage URL because we are using this one as our client

82
00:05:42,170 --> 00:05:42,930
as well.

83
00:05:42,930 --> 00:05:45,930
So let's try to add it actually in the deployment.

84
00:05:46,090 --> 00:05:47,970
So we have too much tabs open.

85
00:05:47,970 --> 00:05:55,170
So I'll just close them and just only keep this one I'll close this one this one and all of these maybe.

86
00:05:56,020 --> 00:05:58,660
Now let's go into the render.

87
00:05:59,340 --> 00:06:00,100
Dot com.

88
00:06:00,740 --> 00:06:04,300
If you don't have an account, just try to sign in or sign up.

89
00:06:04,300 --> 00:06:07,380
I already have an account so I'll just go ahead and log in.

90
00:06:07,380 --> 00:06:12,820
So here I have logged in and this is the application that I was testing out like it has been deployed

91
00:06:12,820 --> 00:06:13,660
three days ago.

92
00:06:13,700 --> 00:06:15,260
Let's try to create a new one.

93
00:06:15,260 --> 00:06:16,820
We'll say web service.

94
00:06:16,820 --> 00:06:19,660
And we'd like to build and deploy from a git repo.

95
00:06:19,660 --> 00:06:23,100
And first you need to create a GitHub repo and push your code.

96
00:06:23,140 --> 00:06:25,700
So I'll just go ahead and try to create a new one.

97
00:06:27,580 --> 00:06:30,060
So I name this one as Mern GitHub app.

98
00:06:30,060 --> 00:06:33,580
And I'll say this is going to be a public and I'll say create repo.

99
00:06:35,780 --> 00:06:39,740
Now here we'll just push this code to existing repo.

100
00:06:39,780 --> 00:06:40,980
I'll copy this.

101
00:06:40,980 --> 00:06:43,740
And in your case your master branch might be main.

102
00:06:43,740 --> 00:06:44,900
So don't worry about that.

103
00:06:44,900 --> 00:06:48,660
Just copy this command and go into the root.

104
00:06:49,340 --> 00:06:50,580
So just paste that.

105
00:06:51,580 --> 00:06:56,950
And maybe you need to press enter so that it is going to take this code and push it, but we forgot

106
00:06:56,950 --> 00:06:58,550
to add the latest commit.

107
00:06:58,830 --> 00:07:08,590
So let's try to just say git add all and git commit m and we'll say build.

108
00:07:09,910 --> 00:07:16,230
Um, let's say optimized for build.

109
00:07:16,470 --> 00:07:18,870
But this is not the case.

110
00:07:18,870 --> 00:07:21,630
We forgot to add update the package.json.

111
00:07:21,630 --> 00:07:24,790
So here we are going to add two uh commands.

112
00:07:24,910 --> 00:07:27,510
So one to build the application.

113
00:07:28,030 --> 00:07:30,190
So two to be able to build it.

114
00:07:30,230 --> 00:07:32,230
We need to install the packages.

115
00:07:32,230 --> 00:07:34,070
So npm install.

116
00:07:34,110 --> 00:07:37,350
That's going to be uh installing the packages for the backend.

117
00:07:37,390 --> 00:07:37,910
Okay.

118
00:07:37,990 --> 00:07:41,190
So we will run this in our render.com account.

119
00:07:41,270 --> 00:07:44,830
So it is going to install the node modules for the backend.

120
00:07:44,830 --> 00:07:46,630
And then we would like to install.

121
00:07:47,430 --> 00:07:50,590
So let's say npm install the packages for the front end.

122
00:07:50,630 --> 00:07:52,870
Now we'll just say prefix front end.

123
00:07:53,030 --> 00:07:57,480
That means run this npm install script under this front end folder.

124
00:07:57,480 --> 00:08:02,720
And once you have done that, we would like to run the npm run build command as well.

125
00:08:02,720 --> 00:08:06,320
So npm run build for the front end.

126
00:08:07,200 --> 00:08:11,120
So say dash dash prefix and then the front end.

127
00:08:11,320 --> 00:08:12,480
Now we need also.

128
00:08:12,520 --> 00:08:17,040
We also need to have a start command for script I'll say start.

129
00:08:17,040 --> 00:08:21,720
And that's going to be node under the back end folder.

130
00:08:21,760 --> 00:08:24,600
We would like to run this server.js file.

131
00:08:24,800 --> 00:08:30,160
So with this I could save this file and add all of them from scratch.

132
00:08:30,320 --> 00:08:39,400
So I'll just say git add all the files and git commit m package JSON updated.

133
00:08:39,960 --> 00:08:45,360
And maybe I'll just say server.js updated.

134
00:08:49,520 --> 00:08:54,040
Okay, so package.json and server.js server.js files Updated.

135
00:08:54,040 --> 00:08:55,880
So git commit and git push.

136
00:08:59,200 --> 00:09:02,920
Let's try to see that in our application.

137
00:09:03,920 --> 00:09:05,680
I'll just refresh now.

138
00:09:05,720 --> 00:09:08,280
Here we here we just got the latest commit.

139
00:09:08,280 --> 00:09:11,400
It says package.json and server.js updated.

140
00:09:11,400 --> 00:09:13,760
So we would like to deploy this repo.

141
00:09:13,960 --> 00:09:17,680
We're going to go here and let's say build and deploy from a GitHub repo.

142
00:09:19,280 --> 00:09:22,200
And we're going to get the latest repo that we have here.

143
00:09:22,240 --> 00:09:23,280
I'll say connect.

144
00:09:26,840 --> 00:09:32,960
So here it says name I'll just say Mern GitHub app.

145
00:09:33,640 --> 00:09:37,080
And then we could just leave them as it is.

146
00:09:37,080 --> 00:09:39,320
So npm run build.

147
00:09:39,320 --> 00:09:40,960
That's going to be our build command.

148
00:09:41,880 --> 00:09:47,920
And then for the start command we'll just say npm run start or basically npm start.

149
00:09:47,960 --> 00:09:49,040
That's the same thing.

150
00:09:49,080 --> 00:09:50,800
We're going to go with the free tier.

151
00:09:51,080 --> 00:09:54,530
And we need to add our environment variables one by one.

152
00:09:59,170 --> 00:10:04,170
So here I'll just take this to the maybe like this.

153
00:10:04,170 --> 00:10:07,210
I'll just shrink it and I'll say GitHub API key.

154
00:10:08,090 --> 00:10:08,850
Paste it.

155
00:10:08,850 --> 00:10:09,530
And then.

156
00:10:12,410 --> 00:10:13,890
And then the value.

157
00:10:17,010 --> 00:10:18,970
And I'll do the same thing for all of them.

158
00:10:19,090 --> 00:10:20,730
So we have the Mongo Uri.

159
00:10:20,770 --> 00:10:23,090
I'll just copy all of it and paste it.

160
00:10:23,130 --> 00:10:24,650
We have the port.

161
00:10:25,170 --> 00:10:27,410
Let's say it's going to be this value.

162
00:10:27,890 --> 00:10:31,650
And then we will have the client base URL.

163
00:10:31,690 --> 00:10:33,050
The GitHub client ID.

164
00:10:47,530 --> 00:10:50,770
And for the client base URL we'll just skip it for a second.

165
00:10:54,980 --> 00:10:56,420
Okay, we already added the port.

166
00:10:56,460 --> 00:11:00,940
We could delete this and we're going to add the client base URL once we deploy it.

167
00:11:01,140 --> 00:11:04,020
So we have added all of our environment variables.

168
00:11:04,300 --> 00:11:07,140
Now let's say create the web service.

169
00:11:07,420 --> 00:11:09,420
And hopefully that's going to work.

170
00:11:10,180 --> 00:11:11,780
And that's going to take a bit of time.

171
00:11:11,780 --> 00:11:13,140
So let's just wait for it.

172
00:11:18,460 --> 00:11:20,660
Now it says build was successful.

173
00:11:20,660 --> 00:11:22,460
Now it's trying to deploy this.

174
00:11:22,580 --> 00:11:24,500
And again we need to just wait for it.

175
00:11:29,900 --> 00:11:32,860
So finally it says your site is live.

176
00:11:32,860 --> 00:11:34,020
Let's click to it.

177
00:11:34,300 --> 00:11:37,100
And here it is not going to work as expected.

178
00:11:37,100 --> 00:11:39,060
And we're going to fix it.

179
00:11:39,060 --> 00:11:43,780
Now this is our entire URL or domain I'll copy this.

180
00:11:43,820 --> 00:11:47,180
And we need to update our OAuth application.

181
00:11:47,180 --> 00:11:52,550
So now homepage URL is not this one because it is not in the local but it But it is this one.

182
00:11:52,750 --> 00:11:56,350
And this is again for authorization callback URL.

183
00:11:56,510 --> 00:12:00,510
It is going to be this route where we just deployed our application.

184
00:12:00,670 --> 00:12:03,950
So we're going to update that and update the application.

185
00:12:04,870 --> 00:12:12,910
And then also we need to go into the render where we just need to add an environment variable.

186
00:12:13,230 --> 00:12:16,750
So we had this one client base URL.

187
00:12:17,150 --> 00:12:18,990
So I will add it.

188
00:12:18,990 --> 00:12:26,470
So let's say add environment variable that's going to be client base URL.

189
00:12:26,710 --> 00:12:29,910
And then just paste the value which is our application.

190
00:12:29,910 --> 00:12:30,270
Right.

191
00:12:30,310 --> 00:12:32,350
And just delete the slash at the end.

192
00:12:33,390 --> 00:12:35,710
Now we'll just say save the changes.

193
00:12:36,510 --> 00:12:38,470
And I think it is going to deploy it.

194
00:12:38,470 --> 00:12:39,830
Let's go to the dashboard.

195
00:12:40,150 --> 00:12:40,590
Okay.

196
00:12:40,950 --> 00:12:45,550
So automatically it's going to try to deploy because we have changed the environment variables.

197
00:12:45,590 --> 00:12:47,470
Let's wait for it to be completed.

198
00:12:47,470 --> 00:12:49,550
And once it is done I'll just get back.

199
00:12:49,550 --> 00:12:51,160
So it has just been deployed.

200
00:12:51,160 --> 00:12:52,560
Let's test it out now.

201
00:12:52,560 --> 00:12:54,080
So we are going to refresh.

202
00:12:54,720 --> 00:12:59,280
And now if we try to log in, hopefully it is going to work as expected.

203
00:12:59,640 --> 00:13:01,680
And here it fetched this profile.

204
00:13:01,720 --> 00:13:03,240
Let's try to log in.

205
00:13:05,320 --> 00:13:07,800
Now here it says internal server error.

206
00:13:07,800 --> 00:13:11,120
And the reason is we need to just update one thing in our.

207
00:13:11,640 --> 00:13:16,600
Let's see I think inside the password where we just say callback URL.

208
00:13:16,880 --> 00:13:20,440
Instead of this value we're going to put our entire URL.

209
00:13:21,040 --> 00:13:25,480
So that was let's go to the render comm.

210
00:13:25,800 --> 00:13:26,160
Oops.

211
00:13:26,200 --> 00:13:27,360
It is here.

212
00:13:27,720 --> 00:13:30,440
So this is our entire application URL right.

213
00:13:30,480 --> 00:13:34,080
I'm going to copy that and then just paste it to here.

214
00:13:34,640 --> 00:13:35,520
Um okay.

215
00:13:35,560 --> 00:13:36,960
This will be the callback URL.

216
00:13:36,960 --> 00:13:40,040
We just need to type it uh the full URL.

217
00:13:40,320 --> 00:13:41,800
So I will save this file.

218
00:13:41,800 --> 00:13:46,040
And now I'll just try to uh add a commit.

219
00:13:46,040 --> 00:13:49,320
So git add and git commit m.

220
00:13:49,320 --> 00:13:54,810
Him callback URL, update it and I'll just say git push.

221
00:13:54,850 --> 00:13:59,490
Now again it is going to take and deploy this latest commit as well.

222
00:14:00,290 --> 00:14:02,490
So here let's just wait for this as well.

223
00:14:02,890 --> 00:14:03,250
Okay.

224
00:14:03,250 --> 00:14:04,850
So it has just been deployed.

225
00:14:04,890 --> 00:14:07,610
Now let's test it out one last time.

226
00:14:08,210 --> 00:14:09,690
We're going to go into this app.

227
00:14:10,170 --> 00:14:12,130
And here we are in the homepage.

228
00:14:12,130 --> 00:14:14,210
Let's try to log in with this account.

229
00:14:15,370 --> 00:14:18,530
So it is going to take us to back into our application.

230
00:14:18,530 --> 00:14:19,410
And there we go.

231
00:14:19,450 --> 00:14:23,130
Now we have been logged in and everything works as expected.

232
00:14:23,290 --> 00:14:25,130
Let's search for this user.

233
00:14:26,210 --> 00:14:33,010
Here we can see this is their profile if we try to like it here it says user liked.

234
00:14:33,010 --> 00:14:36,290
And you could also add a loading spinner for this with a state.

235
00:14:36,330 --> 00:14:42,250
But if we try to like it again it is going to give us an error that says user already liked.

236
00:14:42,290 --> 00:14:44,370
We could go into the likes page here.

237
00:14:44,370 --> 00:14:50,820
We could see this user has liked our profile, which is the today's date Estate and here we could see

238
00:14:50,820 --> 00:14:51,900
the explore page.

239
00:14:52,100 --> 00:14:54,380
Everything just works as expected.

240
00:14:54,780 --> 00:14:57,420
And yeah, that's going to be our application.

241
00:14:57,460 --> 00:15:02,060
Now the deployment part was a bit tedious so I put some notes for you.

242
00:15:02,060 --> 00:15:06,220
So here I'll just add it in case you would like to see that.

243
00:15:06,220 --> 00:15:08,580
And in case it was a bit confusing.

244
00:15:08,700 --> 00:15:13,820
So inside maybe here I'll just say deployment.

245
00:15:15,980 --> 00:15:17,220
Dash steps.

246
00:15:17,220 --> 00:15:19,020
So deployment steps.md.

247
00:15:19,420 --> 00:15:21,660
And I will copy and paste that.

248
00:15:21,660 --> 00:15:27,340
So we first need to set up the Server.js file where we just added the express dot static middleware

249
00:15:27,500 --> 00:15:31,620
and rest dot send file for our react application.

250
00:15:31,620 --> 00:15:33,940
And also we need to add this their name.

251
00:15:33,980 --> 00:15:34,460
Right.

252
00:15:34,660 --> 00:15:37,060
So let's delete this comment by the way.

253
00:15:37,420 --> 00:15:45,420
And here after that we have added our built in start scripts in package.json so that we could run them

254
00:15:45,420 --> 00:15:47,940
in our render application.

255
00:15:48,230 --> 00:15:54,710
And then we deployed with env variables, where we just copy and paste all of them one by one.

256
00:15:55,030 --> 00:16:01,270
And then we update the GitHub app where the homepage URL and callback URL that was the localhost.

257
00:16:01,270 --> 00:16:05,910
But we added our entire URL or domain.

258
00:16:06,150 --> 00:16:11,390
And then we added the client base URL as environment variable on render.

259
00:16:11,550 --> 00:16:17,110
And lastly, we have updated this client callback URL with the full URL.

260
00:16:17,150 --> 00:16:18,110
There we can see.

261
00:16:18,270 --> 00:16:19,230
So this was.

262
00:16:19,270 --> 00:16:24,470
These are the steps that you need to do for the deployment in case you would like to have it I'll just

263
00:16:24,670 --> 00:16:26,310
uh leave it in the repo.

264
00:16:26,430 --> 00:16:28,550
So this is going to be it for this application.

265
00:16:28,550 --> 00:16:31,270
I hope you were able to follow along up until here.

266
00:16:31,310 --> 00:16:37,790
Now, you could just take this application and just take it to the next level where you could add messaging

267
00:16:37,790 --> 00:16:38,590
functionality.

268
00:16:38,590 --> 00:16:42,710
You could add lots of different things that are related to front events.

269
00:16:42,710 --> 00:16:45,230
You could follow profiles and follow them.

270
00:16:45,230 --> 00:16:46,350
And thanks for watching.

271
00:16:46,390 --> 00:16:48,310
Hopefully I'll see you in the next one.