1
00:00:02,000 --> 00:00:05,000
Now, when it comes to deploying NextJS apps

2
00:00:05,000 --> 00:00:07,000
there are different hosting providers you can use

3
00:00:07,000 --> 00:00:09,000
and there are different ways

4
00:00:09,000 --> 00:00:11,000
of configuring your project as well.

5
00:00:11,000 --> 00:00:14,000
You can, for example, use environment variables.

6
00:00:14,000 --> 00:00:19,000
For example, to hold things like your database credentials.

7
00:00:19,000 --> 00:00:21,000
I'll not dive into that here.

8
00:00:21,000 --> 00:00:25,000
I do in my full next JS course, though.

9
00:00:25,000 --> 00:00:27,000
But for this example here we'll just keep

10
00:00:27,000 --> 00:00:30,000
the credentials stored here in this code

11
00:00:30,000 --> 00:00:34,000
and from a security perspective, this is fine by the way

12
00:00:34,000 --> 00:00:37,000
because this code will never end up on the client.

13
00:00:37,000 --> 00:00:39,000
It just might be unconvenient

14
00:00:39,000 --> 00:00:43,000
to use one and the same database and one and the same user

15
00:00:43,000 --> 00:00:46,000
for development and for production.

16
00:00:46,000 --> 00:00:48,000
But for this demo, this does not matter.

17
00:00:48,000 --> 00:00:50,000
So I'll stick to this approach here.

18
00:00:50,000 --> 00:00:52,000
And regarding the hosting provider

19
00:00:52,000 --> 00:00:54,000
I will use Vercel.

20
00:00:54,000 --> 00:00:58,000
Vercel is a great hosting provider for NextJS applications

21
00:00:58,000 --> 00:01:02,000
because the Vercel actually is a hosting provider

22
00:01:02,000 --> 00:01:05,000
by the same team that's developed NextJS.

23
00:01:05,000 --> 00:01:08,000
So it's really embracing NextJS

24
00:01:08,000 --> 00:01:12,000
and optimized for NextJS if you wanna put it like this.

25
00:01:12,000 --> 00:01:16,000
And deploying NextJS applications to Vercel

26
00:01:16,000 --> 00:01:19,000
is thankfully also extremely simple.

27
00:01:20,000 --> 00:01:23,000
Now what you'll need to do to start deploying

28
00:01:23,000 --> 00:01:28,000
is sign up with a Git repository provider,

29
00:01:28,000 --> 00:01:31,000
because with Vercel you will directly link

30
00:01:31,000 --> 00:01:33,000
your GitHub repository,

31
00:01:33,000 --> 00:01:36,000
which holds your source code, for example,

32
00:01:36,000 --> 00:01:40,000
to Vercel and they will then get your source code from

33
00:01:40,000 --> 00:01:42,000
that repository and deploy it for you.

34
00:01:43,000 --> 00:01:47,000
Therefore you need to use GitHub, GitLab, or Bitbucket,

35
00:01:47,000 --> 00:01:50,000
which are Git repository providers

36
00:01:50,000 --> 00:01:54,000
to put your code there before you can deploy it with Vercel.

37
00:01:54,000 --> 00:01:58,000
Now here I will use GitHub, which arguably is

38
00:01:58,000 --> 00:02:01,000
the biggest and most popular Git repository provider.

39
00:02:01,000 --> 00:02:04,000
And I already did log in with my account here.

40
00:02:05,000 --> 00:02:07,000
Once you did create an account and login,

41
00:02:07,000 --> 00:02:08,000
it's free,

42
00:02:08,000 --> 00:02:11,000
you can create a new repository

43
00:02:11,000 --> 00:02:14,000
and you can give this repository any name you want,

44
00:02:14,000 --> 00:02:18,000
like NextJS course demo or anything like this.

45
00:02:18,000 --> 00:02:20,000
You can also give it a description.

46
00:02:20,000 --> 00:02:24,000
And then chose whether it should be public or private.

47
00:02:24,000 --> 00:02:26,000
If it's public, everyone can see it.

48
00:02:26,000 --> 00:02:27,000
Everyone can see your code.

49
00:02:27,000 --> 00:02:32,000
If it's private only people you grant access to can view it.

50
00:02:32,000 --> 00:02:34,000
And I'll go with private here,

51
00:02:34,000 --> 00:02:36,000
but either of the options can be correct.

52
00:02:36,000 --> 00:02:40,000
It simply depends on which kind of project it is.

53
00:02:40,000 --> 00:02:43,000
If it's a open source project it will probably be public.

54
00:02:44,000 --> 00:02:47,000
So I'll go with private and create my repository.

55
00:02:48,000 --> 00:02:52,000
Once that is created, you need to push your code here.

56
00:02:52,000 --> 00:02:55,000
Now for that you need to install Git on your local system

57
00:02:55,000 --> 00:02:59,000
and you can git git-scm.com.

58
00:02:59,000 --> 00:03:02,000
It's available for all operating systems.

59
00:03:02,000 --> 00:03:04,000
You can download the installer from there

60
00:03:04,000 --> 00:03:07,000
and simply walk through it to install Git on your system.

61
00:03:08,000 --> 00:03:11,000
And once you installed get on your local system

62
00:03:11,000 --> 00:03:15,000
you can create a so-called commit in your project,

63
00:03:15,000 --> 00:03:17,000
a code snapshot, you could say.

64
00:03:17,000 --> 00:03:19,000
And then push that commit,

65
00:03:19,000 --> 00:03:23,000
that repository as a whole, actually, to GitHub

66
00:03:23,000 --> 00:03:27,000
to move your code with your code history to GitHub.

67
00:03:27,000 --> 00:03:30,000
Now, I won't turn this course into a Git course.

68
00:03:30,000 --> 00:03:32,000
If you wanna learn more about Git and GitHub

69
00:03:32,000 --> 00:03:35,000
we got a standalone course on that which you can take.

70
00:03:35,000 --> 00:03:37,000
Here I will assume that you have those Git basics

71
00:03:37,000 --> 00:03:40,000
and that you have Git installed now.

72
00:03:40,000 --> 00:03:42,000
And if you have it installed

73
00:03:42,000 --> 00:03:44,000
you can then go back into your local project,

74
00:03:44,000 --> 00:03:49,000
into your project folder and create a code snapshot,

75
00:03:49,000 --> 00:03:51,000
a commit as it's called.

76
00:03:51,000 --> 00:03:54,000
You do this by running git add dot

77
00:03:54,000 --> 00:03:56,000
and you can run this if you got Git installed

78
00:03:56,000 --> 00:04:00,000
and then git commit and then some message of your choice.

79
00:04:00,000 --> 00:04:03,000
For example, ready for deployment.

80
00:04:03,000 --> 00:04:06,000
Though typically you want to add commit messages

81
00:04:06,000 --> 00:04:08,000
that describe what you changed.

82
00:04:09,000 --> 00:04:13,000
But with that, I now created such a snapshot, such a commit

83
00:04:13,000 --> 00:04:15,000
and now we're ready for deployment.

84
00:04:15,000 --> 00:04:19,000
Now that means that now we need to push our code to GitHub.

85
00:04:19,000 --> 00:04:22,000
For this we can grab this URL here,

86
00:04:22,000 --> 00:04:25,000
which will point to the repository we created.

87
00:04:25,000 --> 00:04:30,000
And in our local project folder run git remote add origin

88
00:04:30,000 --> 00:04:33,000
and paste that URL in here.

89
00:04:34,000 --> 00:04:36,000
Now depending on whether you worked with Git

90
00:04:36,000 --> 00:04:38,000
and GitHub before or not,

91
00:04:38,000 --> 00:04:41,000
you might wanna add your GitHub username here

92
00:04:41,000 --> 00:04:44,000
in front of github.com.

93
00:04:44,000 --> 00:04:46,000
If you did work with GitHub before

94
00:04:46,000 --> 00:04:49,000
and push before you probably don't need to do that,

95
00:04:49,000 --> 00:04:51,000
but if you never pushed anything to GitHub

96
00:04:51,000 --> 00:04:53,000
adding this will ensure

97
00:04:53,000 --> 00:04:55,000
that you're prompted for your password

98
00:04:55,000 --> 00:04:58,000
and that you have a chance of entering your credentials,

99
00:04:58,000 --> 00:05:01,000
because of course you'll need to authenticate yourselves

100
00:05:01,000 --> 00:05:04,000
in order to successfully push to this repository.

101
00:05:04,000 --> 00:05:08,000
You can't just start pushing to some random repositories,

102
00:05:08,000 --> 00:05:10,000
which you don't own.

103
00:05:10,000 --> 00:05:14,000
So therefore here I will now add this origin here

104
00:05:14,000 --> 00:05:18,000
and then run git push -- all.

105
00:05:18,000 --> 00:05:21,000
And this will now push our code here.

106
00:05:21,000 --> 00:05:24,000
Now you might be prompted for your password here

107
00:05:24,000 --> 00:05:26,000
and you can then enter your GitHub password

108
00:05:26,000 --> 00:05:28,000
or you as a token

109
00:05:28,000 --> 00:05:30,000
for

110
00:05:30,000 --> 00:05:31,000
authentication

111
00:05:31,000 --> 00:05:33,000
For this to generate such a token

112
00:05:33,000 --> 00:05:36,000
you need to go to your GitHub settings

113
00:05:36,000 --> 00:05:40,000
and then there go to developer settings,

114
00:05:40,000 --> 00:05:42,000
personal access tokens,

115
00:05:43,000 --> 00:05:46,000
and generate a new token here.

116
00:05:46,000 --> 00:05:48,000
Once you confirm this with your password

117
00:05:48,000 --> 00:05:52,000
you can add some note here like NextJS deployment

118
00:05:52,000 --> 00:05:54,000
or a more general purpose.

119
00:05:54,000 --> 00:05:57,000
And then under scopes select repo,

120
00:05:58,000 --> 00:05:59,000
delete repo,

121
00:05:59,000 --> 00:06:01,000
and

122
00:06:01,000 --> 00:06:03,000
admin repo hook here,

123
00:06:04,000 --> 00:06:05,000
and then generate a token.

124
00:06:06,000 --> 00:06:09,000
And now you'll need to copy that token here,

125
00:06:09,000 --> 00:06:10,000
which is showing up here,

126
00:06:11,000 --> 00:06:15,000
and enter this as a password when you're prompted for it.

127
00:06:15,000 --> 00:06:18,000
Once you did all of that and you pushed successfully

128
00:06:18,000 --> 00:06:21,000
you should see your code in this repository,

129
00:06:21,000 --> 00:06:24,000
which you just created in the main branch.

130
00:06:25,000 --> 00:06:28,000
And now we can link this repository

131
00:06:28,000 --> 00:06:31,000
to Vercel to start deploying.

132
00:06:31,000 --> 00:06:32,000
Now, before we do that

133
00:06:32,000 --> 00:06:34,000
let me talk about building for production

134
00:06:34,000 --> 00:06:37,000
and what Vercel actually does.

135
00:06:37,000 --> 00:06:39,000
Vercel is a hosting provider,

136
00:06:39,000 --> 00:06:42,000
which you can not just use for NextJS.

137
00:06:42,000 --> 00:06:44,000
You can also use them for other projects,

138
00:06:44,000 --> 00:06:47,000
but which definitely is optimized for NextJS.

139
00:06:47,000 --> 00:06:50,000
So whilst you can host other things there as well

140
00:06:50,000 --> 00:06:52,000
and it might be optimized

141
00:06:52,000 --> 00:06:54,000
for those other types of projects as well.

142
00:06:54,000 --> 00:06:56,000
It is definitely optimized for NextJS.

143
00:06:57,000 --> 00:07:01,000
And that means that you can just connect Vercel

144
00:07:01,000 --> 00:07:03,000
to your GitHub repository

145
00:07:03,000 --> 00:07:07,000
and the Vercel will build and then deploy

146
00:07:07,000 --> 00:07:10,000
and start your project for you.

147
00:07:10,000 --> 00:07:13,000
So you don't need to run any built command on your own,

148
00:07:13,000 --> 00:07:15,000
Vercel we'll do that for you.

149
00:07:15,000 --> 00:07:18,000
Nonetheless, I wanna show you what Vercel does.

150
00:07:18,000 --> 00:07:21,000
And therefore I'm back in our local code here

151
00:07:21,000 --> 00:07:25,000
and there in package.json we see a couple of scripts,

152
00:07:25,000 --> 00:07:29,000
which are commands we can execute in this project.

153
00:07:29,000 --> 00:07:32,000
We worked a lot with the dev script

154
00:07:32,000 --> 00:07:34,000
to start this development server.

155
00:07:34,000 --> 00:07:35,000
And that is the script

156
00:07:35,000 --> 00:07:37,000
which we used during local development.

157
00:07:38,000 --> 00:07:41,000
But we can also run the build script

158
00:07:41,000 --> 00:07:43,000
to build our project for production.

159
00:07:43,000 --> 00:07:48,000
So to optimize all our code, minify it, and so on.

160
00:07:48,000 --> 00:07:52,000
And you wanna run this if you do deploy it on another host,

161
00:07:52,000 --> 00:07:55,000
which does not build the project for you.

162
00:07:55,000 --> 00:07:57,000
So we don't need to do it with Vercel,

163
00:07:57,000 --> 00:08:01,000
but you might need to do it forever hosting providers.

164
00:08:01,000 --> 00:08:04,000
And then once you run this command

165
00:08:04,000 --> 00:08:06,000
this will give you a .next folder,

166
00:08:06,000 --> 00:08:10,000
which contains some of these optimized files.

167
00:08:10,000 --> 00:08:12,000
For example, this thought .next folder

168
00:08:12,000 --> 00:08:16,000
will also contain all those pre-generated page files,

169
00:08:16,000 --> 00:08:19,000
those HTML files for your pages,

170
00:08:19,000 --> 00:08:21,000
like the starting page here,

171
00:08:21,000 --> 00:08:24,000
or the individual meetup detail pages.

172
00:08:24,000 --> 00:08:27,000
So this is what npm run build will do for you

173
00:08:27,000 --> 00:08:29,000
and Vercel execute this command

174
00:08:29,000 --> 00:08:32,000
on our behalf on their servers.

175
00:08:32,000 --> 00:08:34,000
So we don't need to do that.

176
00:08:34,000 --> 00:08:37,000
But if you would host your project on another server,

177
00:08:37,000 --> 00:08:39,000
which you manage yourself, for example,

178
00:08:39,000 --> 00:08:41,000
you need to run npm run build

179
00:08:41,000 --> 00:08:44,000
and there after with npm start

180
00:08:44,000 --> 00:08:47,000
you can start a production server.

181
00:08:47,000 --> 00:08:49,000
So now again, we have a running server,

182
00:08:49,000 --> 00:08:51,000
but this is now the production server,

183
00:08:51,000 --> 00:08:54,000
which you could start on a remote machine,

184
00:08:54,000 --> 00:08:55,000
which you administer yourself

185
00:08:55,000 --> 00:08:59,000
to run the server for your next application.

186
00:08:59,000 --> 00:09:01,000
And that server therefore should of course stay up

187
00:09:01,000 --> 00:09:03,000
and running on that machine

188
00:09:03,000 --> 00:09:06,000
to which you deployed your application as long as you want

189
00:09:06,000 --> 00:09:08,000
to expose it to the world.

190
00:09:08,000 --> 00:09:10,000
Though I work with it here though.

191
00:09:10,000 --> 00:09:12,000
Now all of that will be done by Vercel

192
00:09:12,000 --> 00:09:15,000
and therefore let's now go back to Vercel

193
00:09:15,000 --> 00:09:17,000
and continue with GitHub here.

194
00:09:17,000 --> 00:09:20,000
And now here we'll need to link GitHub to Vercel.

195
00:09:20,000 --> 00:09:22,000
Now you are then prompted

196
00:09:22,000 --> 00:09:24,000
to give Vercel certain permissions,

197
00:09:24,000 --> 00:09:26,000
give it access to your repositories,

198
00:09:26,000 --> 00:09:27,000
and I'll do that here.

199
00:09:29,000 --> 00:09:32,000
And once you did that, you can select that repository,

200
00:09:32,000 --> 00:09:34,000
which we created a couple of minutes ago here,

201
00:09:34,000 --> 00:09:36,000
and connect it to Vercel.

202
00:09:36,000 --> 00:09:39,000
So I'll click import here on that repository.

203
00:09:39,000 --> 00:09:41,000
Now we'll select this personal account here.

204
00:09:41,000 --> 00:09:44,000
You might be prompted to create an account here.

205
00:09:44,000 --> 00:09:47,000
And there you wanna choose the personal one,

206
00:09:47,000 --> 00:09:50,000
which is free to use or free to get started.

207
00:09:50,000 --> 00:09:53,000
Definitely check out their pricing pages

208
00:09:53,000 --> 00:09:56,000
to learn more about the different options you have there.

209
00:09:57,000 --> 00:09:59,000
And with that, we now can configure

210
00:09:59,000 --> 00:10:00,000
how our code should be pulled

211
00:10:00,000 --> 00:10:03,000
and how the project should be built.

212
00:10:03,000 --> 00:10:07,000
And all the defaults here typically should work for you.

213
00:10:07,000 --> 00:10:10,000
It detected that it's a NextJS project.

214
00:10:10,000 --> 00:10:12,000
The default build and output settings work for us

215
00:10:12,000 --> 00:10:15,000
And we could override environment variables here

216
00:10:15,000 --> 00:10:16,000
if we would be using any.

217
00:10:16,000 --> 00:10:19,000
But we aren't and hence, we can just click deploy.

218
00:10:21,000 --> 00:10:22,000
Now to ensure that it really works

219
00:10:22,000 --> 00:10:25,000
we'll also need to go to MongoDB Atlas

220
00:10:25,000 --> 00:10:27,000
and change something here.

221
00:10:27,000 --> 00:10:30,000
There under network access you will need to make sure

222
00:10:30,000 --> 00:10:32,000
that you allow access from anywhere.

223
00:10:33,000 --> 00:10:36,000
This ensures that the Vercel servers

224
00:10:36,000 --> 00:10:38,000
on which our application will run,

225
00:10:38,000 --> 00:10:41,000
will be able to connect to MongoDB.

226
00:10:41,000 --> 00:10:42,000
Otherwise this will fail

227
00:10:42,000 --> 00:10:45,000
and our data can't be loaded and stored.

228
00:10:45,000 --> 00:10:48,000
So we need to grant this access.

229
00:10:48,000 --> 00:10:50,000
We still, of course, use our credentials

230
00:10:50,000 --> 00:10:53,000
for actually establishing the connection,

231
00:10:53,000 --> 00:10:56,000
but we need to open up that global access to allow Vercel

232
00:10:56,000 --> 00:10:59,000
and its servers and our code running on their servers

233
00:10:59,000 --> 00:11:01,000
to connect to MongoDB.

234
00:11:01,000 --> 00:11:05,000
Now it can take a while until this operation is done.

235
00:11:05,000 --> 00:11:07,000
So let's wait for this.

236
00:11:07,000 --> 00:11:08,000
And once it's done,

237
00:11:08,000 --> 00:11:12,000
here, we actually see an error that connection failed

238
00:11:12,000 --> 00:11:16,000
because I just changed it after starting the deploy,

239
00:11:16,000 --> 00:11:20,000
but we can simply hit deploy again and start a new deploy,

240
00:11:20,000 --> 00:11:21,000
which should now succeed

241
00:11:21,000 --> 00:11:26,000
because now we did open up MongoDB for outside access.

242
00:11:26,000 --> 00:11:27,000
So let's now wait whether

243
00:11:27,000 --> 00:11:30,000
that now starts up successfully here.

244
00:11:30,000 --> 00:11:33,000
It definitely built our site successful here.

245
00:11:33,000 --> 00:11:34,000
That's good.

246
00:11:34,000 --> 00:11:36,000
And that is looking good.

247
00:11:36,000 --> 00:11:40,000
Now we can click visit and we see our site up

248
00:11:40,000 --> 00:11:44,000
and running on Vercel's servers here.

249
00:11:44,000 --> 00:11:46,000
We can also try adding a meetup here

250
00:11:47,000 --> 00:11:52,000
test street five, this is a test and see whether that works

251
00:11:54,000 --> 00:11:55,000
and it does.

252
00:11:55,000 --> 00:11:58,000
It might not show up immediately on this page

253
00:11:58,000 --> 00:12:01,000
because this page is statically generated

254
00:12:01,000 --> 00:12:02,000
and then only revalidated

255
00:12:02,000 --> 00:12:06,000
once every second for incoming requests

256
00:12:06,000 --> 00:12:08,000
and then it needs to be pre-generated again.

257
00:12:08,000 --> 00:12:11,000
So even after one second, it might not show up immediately,

258
00:12:11,000 --> 00:12:15,000
but eventually we see our new meetup here

259
00:12:15,000 --> 00:12:17,000
and we can't visit it here though.

260
00:12:17,000 --> 00:12:20,000
We get a 404 error here

261
00:12:20,000 --> 00:12:23,000
and that's actually an expected error at this point.

262
00:12:23,000 --> 00:12:24,000
What's the problem here?