1
00:00:00,760 --> 00:00:01,320
Okay.

2
00:00:01,320 --> 00:00:04,480
So finally we would like to deploy our application.

3
00:00:04,480 --> 00:00:07,680
And this is the current state of our app that we have.

4
00:00:07,680 --> 00:00:10,800
So we are running the server at 5000 port.

5
00:00:10,800 --> 00:00:15,040
And we are running the react application under the 5173.

6
00:00:15,320 --> 00:00:19,200
And this current setup wants us to handle the course.

7
00:00:19,240 --> 00:00:25,960
And it is kind of hard to deploy this in this way because we need to go ahead and deploy this one separately

8
00:00:25,960 --> 00:00:27,680
and deploy it separately.

9
00:00:27,720 --> 00:00:34,080
Then I'll just handle all the requests, forward them back to this domain, and instead of handling

10
00:00:34,080 --> 00:00:39,600
all that, what we can do is basically serve both of them under the same domain.

11
00:00:39,600 --> 00:00:45,000
And it is just going to be a lot easier for us to deploy, because we don't also need to handle the

12
00:00:45,000 --> 00:00:46,000
course errors.

13
00:00:46,160 --> 00:00:47,720
They are under the same domain.

14
00:00:47,880 --> 00:00:50,400
And let's see how we can handle this.

15
00:00:50,680 --> 00:00:55,000
So first we're going to go into the back end under the server.js file.

16
00:00:55,240 --> 00:00:59,400
And we would like to import a package from node.

17
00:00:59,400 --> 00:01:03,980
So this is the built in, uh, module let's say path from path.

18
00:01:04,100 --> 00:01:08,260
And we'll click to get the let's say the dear name variable.

19
00:01:08,660 --> 00:01:10,660
So this is going to be path dot resolve.

20
00:01:10,660 --> 00:01:12,340
And we're going to see what this does.

21
00:01:12,540 --> 00:01:16,140
Now since we'll be in the production we don't really need the course.

22
00:01:16,260 --> 00:01:17,940
Uh like course.

23
00:01:18,020 --> 00:01:19,540
Uh how do we say it.

24
00:01:19,580 --> 00:01:23,580
The course configuration I will go ahead and wrap this with an if check.

25
00:01:23,580 --> 00:01:30,060
I'll say if the process dot env not env if it is equal to development.

26
00:01:30,500 --> 00:01:36,740
So here I'll just say if it is not equal to the production only then go ahead and configure this.

27
00:01:36,900 --> 00:01:40,860
And this node env is something that we already have.

28
00:01:40,900 --> 00:01:42,900
Now we'll be testing out in production.

29
00:01:42,900 --> 00:01:44,540
Let's just say production.

30
00:01:44,900 --> 00:01:46,140
Uh we will fix this.

31
00:01:46,380 --> 00:01:49,660
Make it to be development just in a second.

32
00:01:49,700 --> 00:01:52,060
But we would like to test this out in production.

33
00:01:52,060 --> 00:01:52,980
So let's save.

34
00:01:53,260 --> 00:01:59,360
And we're going to go ahead after all these routes we would like to make our react application to be

35
00:01:59,360 --> 00:02:01,040
our static assets.

36
00:02:01,320 --> 00:02:02,480
Now, what does that mean?

37
00:02:03,240 --> 00:02:09,080
When you let me just actually delete these, like open up and just show you how how it's going to look

38
00:02:09,080 --> 00:02:14,280
like in the production, you're going to go ahead and build your react application.

39
00:02:14,480 --> 00:02:20,520
If you say under the front end npm run build, it's going to give you a dist folder, right.

40
00:02:20,560 --> 00:02:24,720
So this will take a little bit of time, but we should be able to get a dist folder.

41
00:02:24,760 --> 00:02:25,400
There we go.

42
00:02:25,600 --> 00:02:31,920
This is the, uh, production grade optimized version of your react application.

43
00:02:31,920 --> 00:02:39,280
And from here you have the index.html file, which is the entry point for your react application.

44
00:02:39,280 --> 00:02:43,240
And we would like to make this to be our front end application basically.

45
00:02:43,240 --> 00:02:43,480
Right.

46
00:02:43,480 --> 00:02:45,760
And this is what we call the static assets.

47
00:02:45,760 --> 00:02:54,840
So I'll say if the process dot env dot node env if it is equal to production, we would like to make

48
00:02:54,840 --> 00:02:56,880
this static assets to work right.

49
00:02:58,100 --> 00:03:04,420
So if we are in the production, we would like to use this middleware which is express dot static.

50
00:03:04,620 --> 00:03:08,660
We say the Dirname from here you would like to.

51
00:03:09,140 --> 00:03:09,460
Okay.

52
00:03:09,540 --> 00:03:12,100
Sorry I think we should use Path.join.

53
00:03:12,660 --> 00:03:17,740
We will say use the underscore dirname which is going to be in the root okay.

54
00:03:17,780 --> 00:03:23,100
So we are here now and from there we would like to go under the front end folder.

55
00:03:23,100 --> 00:03:29,900
So let's say slash front end slash the dist folder that we have right.

56
00:03:29,940 --> 00:03:33,860
And we would like to now just handle our routes.

57
00:03:33,900 --> 00:03:38,820
We'll say app dot get any routes other than these that we have above.

58
00:03:38,860 --> 00:03:40,940
So these were our API endpoints.

59
00:03:41,300 --> 00:03:49,380
Other than these we would like to hit this controller where we would like to send a file rez dot send

60
00:03:49,420 --> 00:03:50,140
file.

61
00:03:50,180 --> 00:03:52,100
Let's again get the path.

62
00:03:52,100 --> 00:03:54,140
So we'll say path dot resolve.

63
00:03:55,340 --> 00:03:58,080
And this is going to be first under the route.

64
00:03:58,080 --> 00:04:04,840
So their name go under the front end under the test and serve the index.html file.

65
00:04:05,040 --> 00:04:11,920
So with this now we are serving both the react application and our API under the same domain.

66
00:04:11,960 --> 00:04:12,400
Right.

67
00:04:13,000 --> 00:04:14,680
So these were our APIs.

68
00:04:14,680 --> 00:04:18,360
And now in the production we will also get the react application.

69
00:04:18,880 --> 00:04:22,200
Okay let's save and try to add our script.

70
00:04:23,240 --> 00:04:27,880
So when we deploy our application initially we are not going to have the nodemodules.

71
00:04:28,160 --> 00:04:30,720
Not from here and not in the front end.

72
00:04:31,840 --> 00:04:33,320
So let me just show this.

73
00:04:33,360 --> 00:04:34,440
I will delete this.

74
00:04:35,600 --> 00:04:40,160
Just give the permission now and I will say delete it permanently.

75
00:04:40,880 --> 00:04:41,120
Okay.

76
00:04:41,160 --> 00:04:46,760
Let's do the same thing for this one and delete the dist folder as well.

77
00:04:47,680 --> 00:04:51,600
So they would take a little bit time but hopefully they should be gone.

78
00:04:52,640 --> 00:04:57,660
Okay so this is how we how we are going to have our code base when we try to deploy it.

79
00:04:57,660 --> 00:05:02,620
And we would like to have this build command where we would like to first install dependencies for the

80
00:05:02,620 --> 00:05:03,300
backend.

81
00:05:03,460 --> 00:05:06,340
And we would like to install it for the front end.

82
00:05:06,380 --> 00:05:09,860
So we can say prefix front end.

83
00:05:10,180 --> 00:05:13,820
This basically says run this command under this folder.

84
00:05:13,940 --> 00:05:17,780
And we would like to build our front end application as well.

85
00:05:18,020 --> 00:05:19,620
So let's test this out.

86
00:05:19,860 --> 00:05:21,300
I will shrink.

87
00:05:21,500 --> 00:05:24,300
I mean kill my terminal and open up a new one.

88
00:05:24,460 --> 00:05:26,340
I'll say npm run build.

89
00:05:26,900 --> 00:05:30,700
So it would get the node modules for the back end first.

90
00:05:31,020 --> 00:05:34,180
Then it's going to get it for the front end right.

91
00:05:34,540 --> 00:05:39,060
Then it's going to get the dist folder because it is building it for the front end.

92
00:05:39,980 --> 00:05:48,660
And once this is done, we should be able to actually, um, test our application in the production.

93
00:05:48,900 --> 00:05:53,600
We have our uh environment variable to be equal to Vehicle to production.

94
00:05:53,600 --> 00:05:57,000
We're going to hit this check and it should be working out.

95
00:05:57,840 --> 00:05:59,680
Now let's wait for this to complete.

96
00:06:00,520 --> 00:06:03,840
Once we get the dist folder, we should be able to run the.

97
00:06:04,160 --> 00:06:07,480
NPM start to be able to visit our application.

98
00:06:09,280 --> 00:06:11,080
Okay, so it has just been completed.

99
00:06:11,080 --> 00:06:11,920
It took about.

100
00:06:11,960 --> 00:06:13,480
17 seconds.

101
00:06:13,520 --> 00:06:17,200
Now let's say npm start or npm run start.

102
00:06:17,240 --> 00:06:18,320
It is the same thing.

103
00:06:19,600 --> 00:06:20,360
We should be able to.

104
00:06:20,400 --> 00:06:25,200
Visit our entire application under the localhost 5000.

105
00:06:26,560 --> 00:06:28,880
So here let's just even test this out.

106
00:06:28,920 --> 00:06:29,960
Now this is not going to work.

107
00:06:29,960 --> 00:06:32,880
If you refresh you don't really have this port anymore because we.

108
00:06:32,920 --> 00:06:37,640
Are in the production now I'll say localhost uh, 5000.

109
00:06:38,520 --> 00:06:40,400
Now let's visit it here we can see.

110
00:06:40,440 --> 00:06:44,920
Even though it is the server port that we had previously.

111
00:06:45,160 --> 00:06:45,760
Right.

112
00:06:45,760 --> 00:06:46,760
This is what we had.

113
00:06:47,480 --> 00:06:50,800
But now we can visit our react application under the.

114
00:06:50,840 --> 00:06:56,180
Same place and we can mark our notifications as read or delete.

115
00:06:56,180 --> 00:06:57,060
It is working.

116
00:06:57,100 --> 00:07:00,060
That means our API endpoints are also working.

117
00:07:00,340 --> 00:07:04,140
So this is going to be it for the, uh, deployment setup.

118
00:07:04,180 --> 00:07:08,740
We would like to now just push this code to the GitHub and deploy it on a platform.

119
00:07:09,060 --> 00:07:12,660
So I'll go ahead and create a GitHub repo and push this into it.

120
00:07:13,100 --> 00:07:17,140
So here I am in my GitHub dashboard where I said create a new repo.

121
00:07:17,140 --> 00:07:19,300
And I almost forgot this.

122
00:07:19,620 --> 00:07:21,780
We need to handle the git ignore.

123
00:07:22,220 --> 00:07:23,660
So let's shrink everything.

124
00:07:24,180 --> 00:07:27,500
Now we have two different git ignore files which we don't really need.

125
00:07:27,500 --> 00:07:30,940
I will cut this entire content and delete this file.

126
00:07:31,900 --> 00:07:36,940
I'll just paste it into here and I think I'll just delete everything from here.

127
00:07:36,980 --> 00:07:40,340
Paste it and we'll take the add the dot env file.

128
00:07:40,740 --> 00:07:45,900
Now into here because it doesn't have it by default but it has the node modules the dist.

129
00:07:45,940 --> 00:07:47,420
They all would be ignored.

130
00:07:48,060 --> 00:07:51,960
Okay now I will I think, also go into the front end.

131
00:07:52,000 --> 00:07:53,680
There is one thing that we forgot.

132
00:07:54,560 --> 00:07:58,960
So if we are in the production, we are not going to have the localhost, right?

133
00:07:59,000 --> 00:08:00,760
This is going to be your domain.

134
00:08:00,760 --> 00:08:03,920
Let's say my LinkedIn clone.

135
00:08:03,920 --> 00:08:07,880
It's going to be maybe.com okay whatever that is.

136
00:08:07,880 --> 00:08:11,920
So we don't we want to hit this instead of localhost 5000.

137
00:08:12,080 --> 00:08:14,600
And this is how we can make this to be dynamic.

138
00:08:14,640 --> 00:08:18,080
We will say import dot meta dot mode.

139
00:08:18,160 --> 00:08:23,920
If it is equal to development then we would like to hit this localhost.

140
00:08:26,720 --> 00:08:35,680
But else we will take the hit whatever the domain is right then slash api slash v1 okay I mean v1 okay.

141
00:08:35,720 --> 00:08:38,040
Hopefully this should be working out in this case.

142
00:08:38,120 --> 00:08:43,400
Um, this would be important in the production when we deploy our application.

143
00:08:44,120 --> 00:08:44,480
Okay.

144
00:08:44,520 --> 00:08:50,300
So now I'll just say git init under the current uh directory.

145
00:08:50,300 --> 00:08:58,260
So under the root and we can add our first commit I'll say git add all.

146
00:08:58,860 --> 00:09:00,660
And now just take a look at them.

147
00:09:00,660 --> 00:09:01,860
They are been ignored.

148
00:09:01,860 --> 00:09:04,780
And this and node modules are also being ignored.

149
00:09:04,900 --> 00:09:07,780
And let's just check if we have any todos left.

150
00:09:08,740 --> 00:09:10,620
So here are the things that we said.

151
00:09:10,660 --> 00:09:13,540
Check if we need to invalidate, but we don't really need it.

152
00:09:13,540 --> 00:09:14,820
So I'll just delete these.

153
00:09:15,460 --> 00:09:21,100
And here we said also we handle this as well so we can delete that.

154
00:09:21,660 --> 00:09:24,180
I will just say git add all over again.

155
00:09:26,300 --> 00:09:26,580
Okay.

156
00:09:26,620 --> 00:09:28,500
Now we can commit our changes.

157
00:09:28,660 --> 00:09:33,500
Let's say git commit m project completed.

158
00:09:35,780 --> 00:09:36,180
Okay.

159
00:09:36,220 --> 00:09:41,060
So let's try to create our repo I will say LinkedIn clone.

160
00:09:41,940 --> 00:09:43,260
I'll make this private.

161
00:09:43,500 --> 00:09:45,660
When you're watching this video it's going to be public.

162
00:09:45,660 --> 00:09:50,040
But for now I will go with the private until I publish this video.

163
00:09:50,320 --> 00:09:52,400
Let's say create the repo.

164
00:09:54,440 --> 00:09:57,560
And we would like to just push it to our account.

165
00:09:57,920 --> 00:09:59,000
I'll just paste that.

166
00:10:04,280 --> 00:10:06,680
Now if we refresh, it should be here.

167
00:10:07,440 --> 00:10:07,800
Okay.

168
00:10:07,840 --> 00:10:08,680
This is our code.

169
00:10:08,680 --> 00:10:13,240
Let's go ahead into the render comm, which is going to be the platform that we'd like to deploy our

170
00:10:13,240 --> 00:10:14,280
application to.

171
00:10:14,600 --> 00:10:16,800
And it is free to get started with.

172
00:10:17,000 --> 00:10:21,120
You don't need to put your credit card or anything like that.

173
00:10:22,640 --> 00:10:23,560
So let's see.

174
00:10:23,600 --> 00:10:26,240
I'll just say deploy a new web service.

175
00:10:26,680 --> 00:10:33,200
From here we would like to select our LinkedIn clone let's say connect.

176
00:10:35,280 --> 00:10:39,120
And we would like to add our environment variables basically.

177
00:10:39,120 --> 00:10:39,600
Right.

178
00:10:40,120 --> 00:10:42,640
So first I think we can handle the scripts.

179
00:10:42,960 --> 00:10:49,940
The build command is going to be npm run On built and for the start we will say npm run start.

180
00:10:50,100 --> 00:10:53,540
These are the scripts that we have in our package.json file.

181
00:10:53,700 --> 00:10:57,540
And we would like to go with the free plan so that we don't really pay anything.

182
00:10:57,740 --> 00:11:00,980
And let's say add environment variables.

183
00:11:01,380 --> 00:11:05,500
We can add it one by one or just say add from a dot env file.

184
00:11:05,780 --> 00:11:07,860
Let's go ahead and copy everything.

185
00:11:09,980 --> 00:11:12,740
And just say add from dot env file.

186
00:11:13,060 --> 00:11:13,820
Paste it.

187
00:11:16,100 --> 00:11:17,700
So port is going to be this one.

188
00:11:17,700 --> 00:11:19,020
Your mongo uri.

189
00:11:19,340 --> 00:11:28,340
Um your secret note env is going to be production and your mail trap token as well as the like your

190
00:11:28,380 --> 00:11:31,940
sending domain and your name Cloudinary secrets.

191
00:11:31,980 --> 00:11:35,580
And for the client URL we don't have the localhost right.

192
00:11:35,620 --> 00:11:39,860
We are going to set this up once render gives us a domain.

193
00:11:39,860 --> 00:11:43,580
So for now just delete it and just say add variables.

194
00:11:46,120 --> 00:11:49,640
Now we can go ahead and deploy this web service.

195
00:11:50,360 --> 00:11:52,320
This is going to take a little bit of time.

196
00:11:52,320 --> 00:11:55,560
And once this is ready we should be good to go.

197
00:11:58,720 --> 00:12:02,080
So I'll just wait for this to complete and come back to the video.

198
00:12:02,400 --> 00:12:02,760
Okay.

199
00:12:02,800 --> 00:12:04,520
So in my case it has failed.

200
00:12:04,520 --> 00:12:08,400
And the reason is we are setting the node env to be production.

201
00:12:08,400 --> 00:12:12,880
And since this is production it cannot install the dev dependencies.

202
00:12:12,920 --> 00:12:14,600
So let's go ahead and delete this.

203
00:12:14,920 --> 00:12:16,720
Just say save and deploy.

204
00:12:17,520 --> 00:12:23,120
Now it should be good to go and render will know the node env should be production by default.

205
00:12:23,400 --> 00:12:26,000
So if you go here it is trying to deploy.

206
00:12:26,800 --> 00:12:31,000
Let's click to this and just wait for this to complete successfully.

207
00:12:31,040 --> 00:12:33,120
Once this is done I'll just be right back.

208
00:12:33,800 --> 00:12:36,640
Okay so it looks like it is successfully completed.

209
00:12:36,680 --> 00:12:40,200
We got a URL and here it says your service is live.

210
00:12:40,240 --> 00:12:43,080
Server is running in MongoDB connected.

211
00:12:43,320 --> 00:12:48,020
Now we can really click to this one and just see our application in production.

212
00:12:48,020 --> 00:12:51,540
But now the only thing that we are missing is the client URL.

213
00:12:51,580 --> 00:12:53,900
So I'll go ahead and copy my domain.

214
00:12:54,020 --> 00:12:58,100
And under the environment I'll click to add that client URL.

215
00:12:58,340 --> 00:13:04,100
So I'll just say add client underscore URL and paste it.

216
00:13:04,100 --> 00:13:07,660
So once you add it you'll just say save and deploy.

217
00:13:08,100 --> 00:13:12,700
This is going to deploy your application one more time.

218
00:13:12,700 --> 00:13:18,700
And the reason that we have added that client URL is because we are using it in our emails.

219
00:13:18,740 --> 00:13:25,900
So let's say client uh underscore URL I'll just close everything.

220
00:13:27,660 --> 00:13:34,300
So here in the auth controller, when we send the welcome email we are using the domain slash profile.

221
00:13:34,300 --> 00:13:35,540
And then the username.

222
00:13:35,540 --> 00:13:42,060
So when they click to it they would take them to the actual application slash their profile.

223
00:13:42,060 --> 00:13:44,840
So I'll just show you what that means just in a second.

224
00:13:44,840 --> 00:13:47,560
Once this is completed successfully.

225
00:13:48,000 --> 00:13:49,600
Okay, so it is live.

226
00:13:49,640 --> 00:13:50,880
Let's just test this out.

227
00:13:50,880 --> 00:13:52,080
I'll click to this.

228
00:13:52,120 --> 00:13:54,200
This would take us to our application.

229
00:13:54,200 --> 00:13:56,200
And now I'll go ahead.

230
00:13:56,240 --> 00:13:57,920
Just open up a new tab.

231
00:13:58,160 --> 00:14:00,760
Uh, let's just make it to be incognito tab.

232
00:14:00,760 --> 00:14:04,960
And I'll just get the URL so that I can try to log in as Beth.

233
00:14:07,160 --> 00:14:10,720
So this will take us to the login page let's say Beth Doe.

234
00:14:11,080 --> 00:14:12,760
Let's put the wrong password.

235
00:14:13,480 --> 00:14:14,760
Invalid credentials.

236
00:14:14,760 --> 00:14:17,960
Let's put the correct one and we should be logged in.

237
00:14:18,240 --> 00:14:23,000
Now I'll go ahead and uh, I mean send a connection request to this user.

238
00:14:23,880 --> 00:14:24,120
Okay.

239
00:14:24,120 --> 00:14:24,920
It says pending.

240
00:14:24,920 --> 00:14:26,200
It is sent.

241
00:14:26,240 --> 00:14:28,440
Now I'll just say connect this.

242
00:14:28,440 --> 00:14:28,920
Right.

243
00:14:29,120 --> 00:14:30,920
And we got the notification by the way.

244
00:14:30,920 --> 00:14:32,200
So this is connected.

245
00:14:32,920 --> 00:14:36,640
Now we should be able to get an email from our inbox.

246
00:14:36,680 --> 00:14:39,840
So let's say uh go ahead and take a look at it.

247
00:14:40,240 --> 00:14:43,340
It says Barstow accepted your connection request.

248
00:14:43,500 --> 00:14:49,940
And now, if you just hover over this on the bottom, you can see we are getting the client URL slash

249
00:14:49,980 --> 00:14:52,540
profile and then the username.

250
00:14:52,580 --> 00:14:56,300
If we click to it it's going to take us to the profile page.

251
00:14:56,460 --> 00:15:00,060
So this is why we have updated the client URL right.

252
00:15:00,100 --> 00:15:02,500
This is our actual application's URL.

253
00:15:02,860 --> 00:15:09,300
And now as you can see even though we are connected with this user here it says still connect button

254
00:15:09,340 --> 00:15:11,660
which means we have a bug in our code.

255
00:15:11,700 --> 00:15:14,220
So let's try to fix it in the profile header.

256
00:15:15,660 --> 00:15:16,820
So we'll go here.

257
00:15:16,820 --> 00:15:21,420
And what I have done is just updated this dot env to be development.

258
00:15:21,460 --> 00:15:21,940
Okay.

259
00:15:21,980 --> 00:15:28,420
So just keep it like this so that you can test this out in your uh, local development.

260
00:15:28,460 --> 00:15:31,180
Basically here you are not in the production.

261
00:15:31,180 --> 00:15:32,460
So just remember this.

262
00:15:33,340 --> 00:15:36,020
You would like to go into the profile header.

263
00:15:37,740 --> 00:15:43,640
And now we have this error is because this is not being run correctly.

264
00:15:44,200 --> 00:15:48,200
Whenever the status changes, it should rerun this again.

265
00:15:48,480 --> 00:15:51,880
So we can run this with a use memo.

266
00:15:52,280 --> 00:15:53,720
So I will go ahead.

267
00:15:53,760 --> 00:16:01,320
Maybe just cut this function say use memo import this hook and we're going to paste it into it.

268
00:16:01,720 --> 00:16:02,080
Okay.

269
00:16:02,120 --> 00:16:09,400
And as the dependency array we'll say if is connected changes or the connection status changes you should

270
00:16:09,800 --> 00:16:11,360
uh recalculate this.

271
00:16:11,680 --> 00:16:17,440
So that's going to be it for this component and for the notifications I think we don't really have any

272
00:16:17,480 --> 00:16:19,040
spaces in between.

273
00:16:19,040 --> 00:16:21,480
So let's try to fix that as well.

274
00:16:22,080 --> 00:16:32,800
I will go ahead and maybe in the notifications page here after the padding two we can just say margin

275
00:16:32,800 --> 00:16:34,040
y is going to be four.

276
00:16:34,360 --> 00:16:40,620
So this is another fix that we have done in the very last fix is going to be under the Axios file.

277
00:16:40,780 --> 00:16:42,780
So this is actually undefined.

278
00:16:42,820 --> 00:16:44,220
I made a mistake here.

279
00:16:44,260 --> 00:16:48,500
This should be meta dot env dot mode and all.

280
00:16:48,500 --> 00:16:50,300
It should be in uppercase.

281
00:16:50,420 --> 00:16:53,060
This is the actual value that Veit gives you.

282
00:16:53,060 --> 00:16:54,140
So it's my bad.

283
00:16:54,260 --> 00:16:56,580
Uh, this doesn't exist.

284
00:16:57,020 --> 00:16:58,340
Just keep that in mind.

285
00:16:58,380 --> 00:17:00,220
It should be looking like this.

286
00:17:00,500 --> 00:17:01,260
So let's save.

287
00:17:01,300 --> 00:17:06,900
We have just changed three different files and we would like to deploy this once again.

288
00:17:06,900 --> 00:17:13,620
So let's kill everything basically and just say git add all.

289
00:17:13,900 --> 00:17:21,540
Git commit dash m small fixes and we'll just push our changes.

290
00:17:23,180 --> 00:17:23,580
Okay.

291
00:17:23,620 --> 00:17:25,580
Let's just wait for this to complete.

292
00:17:25,580 --> 00:17:29,380
And once this is done we can just test this out once again.

293
00:17:29,620 --> 00:17:29,980
Okay.

294
00:17:30,020 --> 00:17:31,620
So it has just been deployed.

295
00:17:31,660 --> 00:17:36,820
Now let's click to it and let's visit our application to see if it is working as expected.

296
00:17:37,080 --> 00:17:39,960
So let's take a look at the profile of Beth.

297
00:17:40,000 --> 00:17:41,320
She was our connection.

298
00:17:41,320 --> 00:17:44,680
Let's collect it and looks like we have another error.

299
00:17:44,720 --> 00:17:45,400
Let's see.

300
00:17:45,960 --> 00:17:49,960
In the terminal it says k is not a function.

301
00:17:50,440 --> 00:17:53,640
So let's see I think we have some kind of typo here.

302
00:17:54,640 --> 00:17:54,920
Okay.

303
00:17:54,960 --> 00:17:56,600
Now this is not a function right.

304
00:17:56,600 --> 00:17:58,480
This is a variable at this point.

305
00:17:58,480 --> 00:18:00,600
So we can go ahead and delete this.

306
00:18:00,640 --> 00:18:02,360
So these kind of things happen.

307
00:18:02,360 --> 00:18:03,160
Sorry about this.

308
00:18:03,160 --> 00:18:05,560
But this is real world programming right.

309
00:18:05,600 --> 00:18:08,800
You got some errors in production all the time.

310
00:18:09,040 --> 00:18:13,400
So this is not a function anymore because we wrapped it with Usememo.

311
00:18:13,720 --> 00:18:16,200
So we need to save this and just deploy it.

312
00:18:16,240 --> 00:18:19,160
Once again I'll say git add all.

313
00:18:19,200 --> 00:18:20,400
Git commit.

314
00:18:20,400 --> 00:18:23,160
Let's just say one more fix.

315
00:18:23,160 --> 00:18:28,160
I'll just say okay let's just try to push this.

316
00:18:30,720 --> 00:18:34,640
And again once this is done I think I'll just be right back.

317
00:18:35,360 --> 00:18:37,180
This should be in the pending state.

318
00:18:37,900 --> 00:18:38,260
Okay.

319
00:18:38,300 --> 00:18:38,980
Deploying.

320
00:18:39,140 --> 00:18:40,060
I'll just be back.

321
00:18:40,380 --> 00:18:40,780
Okay.

322
00:18:40,820 --> 00:18:41,980
So this is live.

323
00:18:41,980 --> 00:18:47,020
We can test this out, but I just know there is one thing that we are missing.

324
00:18:47,140 --> 00:18:49,540
Like, this shouldn't be underscore ID.

325
00:18:49,780 --> 00:18:52,380
This connection is already a string.

326
00:18:52,380 --> 00:18:54,460
So we're going to go ahead and delete this.

327
00:18:54,460 --> 00:18:56,820
And I feel terrible right now.

328
00:18:56,860 --> 00:19:00,900
We just encountered multiple issues in the production.

329
00:19:00,900 --> 00:19:03,020
I didn't expect it to be like this.

330
00:19:03,020 --> 00:19:05,100
But you know it just happens.

331
00:19:05,620 --> 00:19:06,380
I'll go ahead.

332
00:19:06,420 --> 00:19:06,900
Save this.

333
00:19:06,900 --> 00:19:09,180
And we should push this as well.

334
00:19:09,340 --> 00:19:15,420
That was just some kind of really bad and tiny fix, but we just have to do it.

335
00:19:19,300 --> 00:19:19,780
Like this.

336
00:19:19,780 --> 00:19:21,380
Just pushing multiple times.

337
00:19:21,860 --> 00:19:23,020
But you just have to do it.

338
00:19:23,060 --> 00:19:26,140
Let's say git add git commit.

339
00:19:26,140 --> 00:19:32,780
And I'll just even feel bad to say one more fix, but I'll just say last fix.

340
00:19:34,480 --> 00:19:38,440
Hopefully, and we'll just push this.

341
00:19:42,200 --> 00:19:46,880
So once this is published, we should be able to test this out.

342
00:19:46,880 --> 00:19:49,480
And let's see how it's going to look like.

343
00:19:49,720 --> 00:19:50,160
Okay.

344
00:19:50,160 --> 00:19:51,800
So it has just been deployed.

345
00:19:51,800 --> 00:19:55,400
And let's go ahead and test this out for the last time.

346
00:19:55,400 --> 00:19:57,280
Hopefully it should be working out.

347
00:19:57,560 --> 00:20:02,200
I'll go ahead and visit the profile of path which is our connection.

348
00:20:02,440 --> 00:20:03,760
And here we go.

349
00:20:03,800 --> 00:20:09,800
Now we can see that we are already connected with this user and we can remove it from our connection

350
00:20:10,120 --> 00:20:10,840
list.

351
00:20:11,000 --> 00:20:13,520
Let's just say connect with this user.

352
00:20:13,680 --> 00:20:14,920
Send the request.

353
00:20:14,960 --> 00:20:24,760
Now we should be able to go ahead and see it, accept it and just have this state again here it says

354
00:20:24,760 --> 00:20:25,800
you are connected.

355
00:20:26,080 --> 00:20:28,840
Now let's try to update our profile.

356
00:20:28,840 --> 00:20:36,980
And by the way we can also read them as like mark them as read all of our notifications and we can delete

357
00:20:36,980 --> 00:20:37,380
them.

358
00:20:37,500 --> 00:20:44,420
You can also show some kind of loading state while it tries to read or delete, and we can just say

359
00:20:44,460 --> 00:20:45,300
edit profile.

360
00:20:45,340 --> 00:20:47,940
Here I'll just say choose Software Engineer two.

361
00:20:47,980 --> 00:20:50,740
In this case it is being updated.

362
00:20:50,780 --> 00:20:52,900
We can add a new profile image.

363
00:20:53,340 --> 00:20:55,020
Let's just try to do it actually.

364
00:20:55,300 --> 00:20:59,860
Here I'll select this user and just say save profile.

365
00:21:00,340 --> 00:21:02,460
And it has been updated in the database.

366
00:21:02,460 --> 00:21:07,260
That means even if you refresh you'll be able to see the latest info that you put.

367
00:21:07,300 --> 00:21:14,140
You can add an experience, you can add education, or you can even add skills and even delete them

368
00:21:14,140 --> 00:21:15,540
if you really wanted to.

369
00:21:15,820 --> 00:21:18,620
Okay, so that's going to be it for this entire tutorial.

370
00:21:18,620 --> 00:21:24,380
I hope you liked it, even though we had some issues at the end where we need to just fix a couple of

371
00:21:24,420 --> 00:21:30,180
things in the profile header, but other than this, I hope you like the tutorial in general.

372
00:21:30,180 --> 00:21:32,500
Thanks for watching and I'll see you in the next one.