Deploying to Vercel

[00:00:00]
>> Scott Moss: Cool, all right, welcome back. So we know about edge functions, we know about middleware. Now we need to deploy our app to Vercel, and it's really easy to do that. Typically, when I start a project, I actually like to scaffold out the next.js project and immediately deploy it.

[00:00:17]
But as you can see there's a site so much after, we didn't start with a blank app first of all. And then second of all it's like, hey, just ignore all this stuff and just deploy it, I think that would have just been kinda rude, so we're doing deploying last.

[00:00:31]
But typically, I do like to deploy immediately, get the CICD set up immediately. Because the last thing you want, in my opinion, is to build all this stuff, deploy it, and now you have to debug all the reasons why it's not deploying. If you just deployed it as soon as you scaffolded it out, it most likely will work immediately.

[00:00:50]
And then at that point going forward, any commit that you change has to work to deploy, or it won't work, and you're forced to fix it there or ignore your deploying. So I like to deploy early, but we're not deploying early, we're deploying right now. So the way it works is, Vercel is free, you don't have to pay for anything.

[00:01:11]
But you do need to make sure you have this repo on GitHub. So if you haven't pushed to GitHub, if you don't plan on pushing into GitHub, you probably won't be able to deploy. But if you do go ahead and push this to GitHub, I would say make sure that you are on the main branch so you can make your branch the main branch.

[00:01:29]
Or you can just pull down my repo and check out to the main branch, which is the complete version of the app. So it's already done and that's what I'm gonna do. I'm gonna checkout to main, so that is the full version of the app for the most part.

[00:01:47]
Let me just close this stuff, don't save that. And yeah, let's go to Vercel, let's do this. I mean, it's pretty self-explanatory, it's not really hard. It's just some gotchas, but nothing specific to Vercel. That's a gotcha, it's just deploying in general. So if you already know how to deploy stuff, this might be simple, and that's just because Vercel makes it simple.

[00:02:07]
If you never deployed anything, then you're gonna see how simple this is. So yeah, if you're on Vercel, go to your personal account, you can click right here, go to New Project. And right here is where it's going to start to pull in your GitHub stuff. So on the left, you pick your GitHub organization, your GitHub project, pick my personal thing here, here it is, next.js-fundamentals.

[00:02:33]
I'm going to import that, my project, this project name. I'm gonna keep it the same, you can change it if you want, I'm gonna keep it the same. It already detected that it's a Next.js app, cuz you can deploy non-Next.js things to Vercel. It doesn't have to be next.js, they actually support a lot of stuff.

[00:02:50]
But it detected it through many, many different ways. So it detected that. Our root directory is the root, so I'm not gonna change that. If there were any customizable commands that I want to change here, like the build command, maybe there's something special about how I build my app, I had to pre-process these files.

[00:03:12]
I have to move this file over to this location or whatever you wanna do, you could override the command. If the output directory is gonna be different than what the default output directory for next.js is, you would put that here. And if you had some special install scripts that you needed to do, which I find I do a lot, quite often, you would override the default install.

[00:03:35]
So if you'd like to use Bun to install, you can put Bun here or whatever, so you can change it by default. I think it actually looks at what lock file you have and goes from there. So for us, we have Bun and package-lock, so I think it'll probably use NPM, but you can override that.

[00:03:52]
Environment variables, we can add these whenever we want, but this is where we're gonna add our database environment. So if you didn't do the Instagres thing yet, you have to do it now, cuz you can't add your local database as an environment variable on a deployed app, that's not gonna work.

[00:04:04]
So I'll come back and add this, but this is where you'll add it. And also, like our JWT secret, we'll have to add that here as well, so you can do that. I'm just gonna click deploy, and let's see if this deploys or not. If you didn't turn off the TypeScript errors and ESLint errors before and you have those errors, it's not gonna deploy.

[00:04:27]
[LAUGH] It's gonna say, go fix those. So you can see right here, it's literally running your computer in the cloud. It's gonna go through, do all the things, so it's installing the CLI, it's doing all that stuff. See right here, same output that we get when we ran the next build command to test out that memorization, it's doing the same thing.

[00:04:51]
So, a really good way to test whether or not your thing is gonna build is just run the build command on your computer. If that breaks, it's probably gonna break up here too. So there we go, looks like something broke. And it's the database connection string, we need to add our environment variable, which was expected, I just wanted to show you guys how that works.

[00:05:13]
So on the first deploy attempt, if it doesn't deploy, there's nothing there to show you. But the reason I was going head and go and do it, so we can go to the project. Even though it didn't deploy, it did create a project for us. So now that I have the project, it's linked to my GitHub, and all I got to do now to trigger a deploy is just do a pull request, that's it.

[00:05:35]
But let's fix the environment variables first. So Instagres, we'll go here, copy this, go back. To do that we can go to Settings, you go to Environment Variables, I'm gonna go down here to All Environments, you can select different environments here. I'll talk about preview in a minute.

[00:05:57]
Got database URL like this, we'll paste that in, I got another one which is JWT_SECRETS or? Forgot what it was, yeah, JWT_SECRET. So I'll copy that, and actually, what's really cool is you can copy this whole thing. If you have tons of stuff in this file, you can just go in here and hit Paste, and it'll put them all in for you like that.

[00:06:24]
It's pretty cool. I don't need two of those, though. And then, obviously, make a real thing here eventually in production, but I don't really care right now. Anything here, cookies, cool, okay, so we got that. Once you add environment variables, you have to trigger a new deploy. It won't just pick it up and redeploy, even if it wasn't broke the first time.

[00:06:49]
You can see right now it's telling me, they added this, this is cool. Normally, you just have to go do it, but now it's actually telling me to go do it. You can see all my environment variables here, I can click here to reveal them, all that stuff.

[00:07:00]
So I'll click Redeploy. I want to redeploy production main. Yeah, just redeploy this, please. And now, what I can do is I can go to the top, click on Deployments and you can see right here, this will be a log of every deployment that's ever happened and the status of that deployment.

[00:07:16]
And I can just click into it and it'll show me. If it deploys, we'll see it here. A preview of our website will actually show up here if it deploys. So we'll go through this, ignore the warnings, see what happens. I mean, it built on my machine, so it should work.

[00:07:42]
You can also bypass Vercel building it and build it yourself. And whatever CI you like, whether that's GitHub Actions, or Jenkins, or whatever you like, you can do your own build. And they have a CLI that you can use to push it to Vercel, so there's nothing wrong with that.

[00:07:58]
During pre-rendering, fetch rejects to pre-render is complete, typically. Okay, I guess it just ignored that one, [LAUGH] I'm guessing, it just went on anyway, yeah, that's fine. We didn't need that to pre-render anyway, and it looks like what it did was it just made that page dynamic. And on my main branch, I have a button on the homepage that it'll change from login and sign up to go to dashboard if you're logged in.

[00:08:28]
So there's a Git current user fetch on the homepage, and that's what it's freaking out about. That's why we didn't have that on the other branches, because I didn't add that feature on the other branches. So I kinda like that. Sometimes I hate, some websites you'll go to, if you're logged in, you can't see the landing page.

[00:08:43]
It automatically redirects you to the app, and I'm like, I just wanna see the landing page, I hate that. So I added the button where you can do it yourself. Cool, okay, it built, there we go, there's a preview of our site. So if I click on it, so a couple of things is you get a bunch of domains.

[00:09:02]
So you get a domain per deploy, and then unless you add a custom domain, it assigns you a domain. So in this case, this is the domain for the branch for the deploy, you can tell cuz it has the word git in it. Git, that's git, [LAUGH] And then this would be the fixed domain essentially for this actual commit.

[00:09:28]
Let me go to the actual domain, this one, here we go. So here's the domain, it'll be the name of your project something.vercel.app. Then you can assign as many domains as you want to this as you want, so I'll go here. This is for sure not going to work, because I did not migrate the database.

[00:09:53]
So if I try to sign in and sign up, it's gonna break. So what I need to do is migrate the database. The simplest way to do that is just to replace the one that you have here with the one that you got from Instagres, which for me is not that one, it's the one that I already have.

[00:10:12]
And then you just run Drizzle on it? That one, yeah, say that again And you just run Drizzle on it? Yep, you just run Drizzle on it, exactly. Cool, so I got that, and then from here, I can just do a db:push. So npm run db:push. Cool, my database is migrated now, simple.

[00:10:39]
So now, I should not have to redeploy, I'll refresh just because superstition, and I'll try to sign up, email@app.com, admin, admin, admin, admin. Hello, there we go, we now have a working app deployed, super simple.