Transcript from the "Deploying to Vercel" Lesson
[00:00:00]
>> For the most part, we've got a pretty decent functional full-stack app that covers a lot of use cases, when it comes to getting data on the server or the client mutating dynamic routes, and even how to make meshes. It's a lot of stuff in here. But one thing that's really important is like we need to deploy this otherwise it doesn't matter.
[00:00:21] If you didn't ship it, it's not real. If you can't send a link to somebody, you didn't do it. That's why I should tell all my friends, send me a link or you didn't do it. And a GitHub link doesn't count. It's got to be a deployed link.
[00:00:36] So we're going to deploy this. The easiest way to deploy this, in my opinion, would probably be on Versailles. Simply put they made the framework it's got experimental features in it. If it's going to work somewhere it's probably there. So we're gonna deploy it there but I would imagine this is gonna work in other places like, if not now very very very soon.
[00:00:57] And then the easiest way that I think to do this is to put it on GitHub. That's the easiest way to deploy ourselves. Just make a GitHub repo and you can import it ourselves. So I haven a git repo already. I just need to put everything on my main branch, your stuff might already be on your main branch.
[00:01:15] So I'm gonna go do that right quick. It's gonna make a pull request on GitHub. So much easier to do it there. I forgot which app it is, on mine I got so many apps, I think it's this one. Yep there it is. So I'm just going to do this merge it into my main my main is up to date.
[00:01:39] Cool. Okay. And then I recommend going over to Versailles and making an account. It's free. You could do all this for free once you're in Versailles. Your account might look different than this. This is a team account that I'm on and not a personal account, but I think a personal account looks kinda the same.
[00:02:06] I think so. Okay. So, once you're here, you just click on add new, go to project, And this is why I say add it to GitHub, because they let you import from GitHub and it's so easy. So I'm gonna look for mine, I think it's this one. I'm gonna import it.
[00:02:33] I'm just gonna hit deploy. And it's not going to work. It's going to break. Anybody know why?
>> Database.
>> Yeah, the database. Like the URL, it doesn't have any of the environment variables. If the database wasn't going to break it, the cookie name was going to break it, the JWT secret was definitely going to break it.
[00:02:50] So we got to add our environment variables. So let's walk through that while this is breaking. I guess we can just have to wait. We can also just cancel it. But while I was breaking what I'm gonna do just so I'm what I'm doing is fresh with everyone else, we're gonna go make a new database on railway.
[00:03:09] So I'm not using my development database for this because if you use a new database because maybe you're using local now you're using a hosted one. If you are using local, you have to use a hosted database now so everyone has to make a database on railway at this point we're going to deploy, you can't link to your local host Postgres while it's on for sale, so you have to make a database.
[00:03:28] So I'm gonna go back to railway and make like my thirtieth user database this week. Provision Postgres, no they actually charge me five cents that's how many databases I've made I've actually had to pay money, that they gave me. They gave me a $5 credit so. I'm going to click on my database, click connect.
[00:03:51] I'm just going to click on that copy there. Going to go back to Versailles, deployed as we thought it would, or I'm sorry, broke during deployment as we thought it would. But it actually broke for TypeScript errors and we'll talk about that in a minute, didn't even get to it.
[00:04:07] It didn't even deploy and then error out because of the database, because it just straight up just died because of TypeScript ES lint. We're not going to go fix all these so don't worry about that. So we'll I'll show you how to get past that. But for now, let's just even though it broke the deployment, it's still created the project.
[00:04:23] So the project is actually still here. So we can go into the project. I can go into settings, I can click on environment variables and I can add my environment variables here. So database URL, paste in my value there, add another JWT secret paste in my value here, it oesn't matter, and then my cookie name.
[00:04:53] And this doesn't matter okay, let's do that. Hit save environment variables, and they're good to go. The next thing is we need to, for now for the sake of deployment is just rid ourselves of these TypeScript errors. We know we have shamed ourselves by not using TypeScript to its fullest abilities.
[00:05:16] But we're going to turn off that type checking. So the best way to do that is to is in the Next config, so let me see. So you can just do this right here and the next config file. You can just say, yeah, oops, right here. You can say TypeScript.
[00:05:38] Ignore build errors. So it'll still do types and stuff like that. It just won't send out a process.exit 1, which is what causes errors when it sees a types of error. It'll still just let you know it's there, though. OK, so we'll do this. Commit this back. I'm going to push it back.
[00:06:00] Whoops, let me get to me Still there? Nope. All right, it's hitting this. And I'm just gonna push this back up, which is gonna trigger or rebuild on Versailles. Okay. That got pushed up. If we go back to Versailles, we click on deployments. You can see it's building right now and we'll see if this works or not.
[00:06:50] So it should go through deployment and I'm just gonna spoil it right now. It's still not gonna work. Anybody know why? There's one thing that we forgot to do. Actually the build still failed. I don't know why. Is this ES lint now? Yeah, this is ES lint, I forgot, how do we how do we ignore ES lint?
[00:07:23] Look, it's another one. Let's do that. But yeah, other than that anyone know why this is it? This should fix the deployment but the app will probably crashed anybody know why?
>> There's no index.
>> There's no index what? Like index page?
>> No route page.
>> No, because we have the middleware there that redirects.
[00:07:47] So should be good. Good thought though. I'll give you a hint, it has nothing to do with the database migration, how to migrate, the database knows nothing about the schema.
>> Blank schema.
>> It's just it's just a brand new database.
>> So is there a command line?
[00:08:04]
>> Yep.
>> Yeah.
>> So the way that I'm going to show you how I do it. So I'm just going to do it right here, I'm going to go to my env file here locally. It's going to just comment that out right click. I'll make a new one.
[00:08:19] I'm going to get my connection string from railway. We're going to add it here. And then right on my terminal I was gonna say MPX Prisma migrate deploy and that's just going to deploy this to the database and production it's going to run through all the migrations And there we go.
[00:08:50] Now, our database is in sync. So you're gonna tie this into a workflow with your PR, you just don't wanna run this on someone's computer, but this is the initial commit, so, then I'll just go back to my development database. Okay so, it looks like it deployed finally, so we got past those errors, and looks like it's, yeah, there it is.
[00:09:14] It got redirected to the sign-in page. So, we're in the sign-in page. Sign in's not gonna work cuz there's no seated database or no seated user, so we have to sign up, and let's just see if this works Tried to do that and it looks like it's working.
[00:09:38] They're just, we're just not gonna have anything and I don't know if we handle any errors for any of this stuff not being there, but there you go. There you go. So if I try to create a new project, I can say my new project, and create that.
[00:09:55] Remember, that's not going to show up until we hit that refresh button. We should have a new project five seconds later, there we go. So there you go. Now, it's deployed.