Deploying to Vercel

[00:00:00]
>> Let's try to get this deployed then. Let's see what happens with that. So I need to make a new repo for that because this repo has on Main, the other finished app. Well, I guess I could use my finished app. Now, I'm gonna use the same app we all have, always consistent.

[00:00:21]
I'm going to repel just connect it right click, come here, I don't you work, thank you. So this will be AI, full stack the something like that. Copy that, And I'm just gonna paste that. Wait, I need to not call it origin. I forgot I already have something here, I will call this, let me see.

[00:01:03]
I kind of already did it.
>> I did it.
>> Okay, I think it worked out. So I'll just call this, I don't know, deploy I guess. Pick it up, it's already there, great. Alright, so I have all my stuff here. No, what's in here? Okay, that's not bad.

[00:01:33]
I'll say no. Why'd you put my ENV in there? That's fine. Okay, let's deploy this. So we're gonna use Vercel to deploy this. So you just head over to vercel.com, make an account. I have so many things here, once you make an account, also make sure you push your thing up to GitHub.

[00:01:57]
You can't deploy to Vercel unless your project is on GitHub. I think you can with a CLI, but we're just going to do it through GitHub, so much easier. I'm going to add a new project, and my stuff has already connected. You can see 50 seconds ago it saw that I had this app.

[00:02:17]
So I'm just going to import that app, so it sees that it's a next JS app. I can change the name of it if I want. Root directory is the root, I don't have to change anything there. I'm going to change the bill command that I found out the other day.

[00:02:36]
You're gonna have to do Prisma or MPX Prisma generate and then do a next build, why? There's a whole article about it somewhere. I don't know why I didn't even read it. I was just mad that I had to do it. So we got to generate that first, and then we can do the next builds, and then environment variables.

[00:02:59]
So, yeah, you probably want to go into clerk, switch it over to production mode, because by default, clerk is in like dev mode. All right, you can see right here, it says development. You can switch over to production and get the production stuff. I think and I see.

[00:03:19]
That's really cool. You can clone the development instance to production, that is great. But actually, I think the development will work in production for this example. If not we'll make a production would I think it'll work, I don't think cares or knows that you're on localhost. So, I think we're fine, but in a real world you would go to production, so you're not mixing development users with production users, that would be the main reason.

[00:03:44]
But as far as the functionality, I'm pretty sure it's the same. So she'll be good. And then OpenAI keys is good. The only thing we would need to change would be our PlanetScale database, we want to go get that, so let's go do that. So PlanetScale database, I am on this one I believe.

[00:04:13]
So we've got to do a few things with this one, and that's because we probably don't have a production branch yet. You had a main branch, but you didn't designate that for production. So we're gonna do a few things. If you go there, you'll see this thing that says, promote to production.

[00:04:27]
If you're on the main branch, we do. We want to promote this to production, so let's do that. We need a production branch, so we'll promote that to production. That is now the production branch. So on the production branch, we have to make something called safe migrations. Okay, I will enable safe migrations on this branch.

[00:04:48]
This means protect this branch from accidental and dangerous schema changes enabled. Deploy requests, schema reverts, gated deploys, and data loss warnings. I thought you got that for free automatically on production, but I guess you could not have that. But if you turn it off, you can't deploy anything to it anyway.

[00:05:05]
I don't know. That should just be on, I guess. All right, now let's make a deploy request. So, we'll go to branches, we'll click on my dev branch or whatever your branch is. You will deploy to me. You can add in some information, yo, merge, merge this, and create a deploy request.

[00:05:33]
Should be fine, there's literally nothing on the main branch, so it should just go straight in there. There's no conflicts. It's making a deploy request, which I think it already did. It's just timed out. I'll deploy these changes. It's staging them first, this is really cool. For a database?

[00:05:53]
This is kind of insane. There's a schema revert. Man, I know people who lost their jobs from bad migrations, would have loved to have that. [LAUGH] All right, so there we go. We now have our schema on Production, so now let's connect to that. So now I can connect to the database and you will have to create a user here, so I'm going to connect to the main branch.

[00:06:27]
Here's my password. Go ahead, steal my password and everything if you want. [LAUGH] And here's my connection string. So this is the connection string I'm going to use. You can see I have Prisma selected. So I'm just going to copy that. We're going to go back to the Vercel.

[00:06:45]
Sweet thing about Vercel, if you just go into one of the environment variable names with your whole environment variable equals the value copied. And you paste, it'll put them in both of these for you automatically, like that. Pretty far, I know that's the best thing about this app is that okay, other environment variables we need to add.

[00:07:08]
Let me see, don't be looking at my stuff. [LAUGH] I'm gonna add all this stuff. I'm gonna copy this. I'm gonna just, wait, will it do all of them? No, it won't. It did, that's crazy. This is really cool because I spent, man, I was working on my startup.

[00:07:30]
We had like a hundred environment variables now, which is doing that in Heroku was so bad, it was so bad. Okay, and then my open AI key, I think that's everything. I think we're good. I don't have anything in here other than that which we don't need so, I think we're good here.

[00:07:57]
Okay, let's hit that button and see what happens. I mean, the in-memory vector store in theory should work. I mean, it will work if you deploy this to like a non-serverless environment, but I just don't know how it works in serverless. It depends on the resources you have, but at the end of the day, it's just like an object, so it should be fine.

[00:08:27]
It's not like writing to a file, you couldn't use SQLite here, because you don't have access to the file system. But, I don't know, let's see, let's watch it build. It's gonna break. I just remembered we forgot to turn off the TypeScript and ESLint warnings. It's 100% gonna break.

[00:08:42]
I'm just gonna go ahead and do that right now because I know it's happening. I already know it's about to happen. So you can go to your next config, and you can say, TypeScript, you can say ignore build errors true, and then you can say, ESLint ignore build errors true.

[00:09:11]
There's another one that says just ignored completely during builds. I guess it means it just won't even run. Yeah, how about both of those? [LAUGH]
>> Security in depth?
>> Yeah, exactly. Push to Deploy and I would probably just, yeah, look, this thing's like no, what are you doing?

[00:09:39]
Yeah, I freaked out on the first typescript thing is ID implicitly has any, okay, I get it. You want me to use it, I get it no, I gotta add those all again that's fine. It's really easy to do, so we'll just go to ENV again. I can now I feel confident I can just copy all of these, paste that in there, make sure I have this overwritten to MPX Prisma generates and that,

[00:10:26]
>> Did you mean to put a couple of random characters in the project name at the top? Would you like to have passed it?
>> Yeah, I didn't need to do that. Thank you. I would have been like, well, I don't know how they got there, that would have threw me off.

[00:10:39]
And then database your URL, one more time, cool. Now, we'll try to play this. It already exists. I deployed it? I was gonna do another name. Yeah. How about that? Okay, now let's see what happens, should be good here. You can also test this locally, right? You can just find it.

[00:11:10]
You can build this with npx run build, but you still won't get the same environment that you get from Vercel. So Vercel lets you pull down environment variables that you have and you can run it from there and it's a true thing. But I know it builds, I just don't know if it will run [LAUGH] That's the difference.

[00:11:33]
But I mean as you can see it does the same thing that we would do, right? It will do NPM install, you can see it generated the Prisma client and now it is doing a build. Let's see, what is this? Did this break? No, it didn't break. I don't know why it's logging all that stuff out.

[00:11:57]
This is a good sign, that means it built. If you've never seen an XJS output before, every time you see one of these icons or these little logos, that's a lambda. That means this route is dynamic, as in every time someone goes to it, it will be executed.

[00:12:11]
If you see a circle next to it, that means this route is static, it's cash. It's just gonna be served from a CDN, basically. So that's what that means. And hey, look at that.
>> [LAUGH]
>> Looks deployed. Let's go see what broke. So [LAUGH] Let's see if this works.

[00:12:30]
My god, it works. Wow, sign up actually works. I didn't think the sign up is gonna work. Wow, that worked well. Hey, we're in, we're cooking with grease. Okay, let's test some of the AI stuff. So, click new entry Give that a minute, come on. I know you wanna make a new entry, so this is where we can go check out the logs to see why this isn't working.

[00:13:09]
All right, let's refresh it. I knew it was there. Okay, got that messed up. Where did I mess up? Okay, no, there's some error here on the client side. It says, What? That's weird.
>> I don't know if it's relevant, but I've been getting that error on the Next.js documentation, a decent amount.

[00:13:34]
I wonder if it is Versal side.
>> I mean, it's definitely in vendor somewhere. So this looks like Clark, though. Looks like something to do with Clark. Might be a Clark thing. That's weird, maybe we do have to switch to Clark production. I don't know, that is weird, but let's test some of the AI stuff.

[00:14:00]
What was my mood? Because we do have that one in there, and now there's like a default thing. What do you mean? So it is working. I guess it's not pulling this one in. Okay, what has my mood been like, From the last entry. That's good, though, that that's working.

[00:14:39]
Okay, I don't know why that's not pulling that in, and then that page is broke. All right, so it's halfway there. It's kind of what I thought was going to happen, that it would deploy but maybe not run all the way. So it looks like either there's some errors going on with server components or something to do with Clerk and switching over to prod.

[00:14:56]
Either way, that's how you deploy it, and then to fix it, you would just have to go back and forth, playing around with these errors and deploying it until you got it right. So,