Deployment

In this chapter we're going to finally deploy our project to Vercel. Let's start by preparing our code for production. This will be quite easy as we only need to change a few things. What I want to do first is do the following. Let's go ahead and make sure nothing is running.

Then let's go ahead inside of functions.ts. This file is located inside of the ingest folder. Source ingest functions. So this is the last to do that we have. Remove in production.

What we can do instead is just process.environment node environment is equal to production. Let's use 3, otherwise let's use 0. As simple as that. Now let's go ahead and do one more thing. Let's go inside of our terminal and let's run npm run build.

This is the same command that will be running once we add our project to Vercel. But it is way easier to debug if a build fails in your local environment than on Vercel. That's why I recommend that you don't add anything to Vercel until you can get a successful build locally. Why should a build fail and how can it fail? Most likely because of this step right here, linting and checking validity of types.

So basically what this just did is validated my entire code for any type errors. If you have any type errors in your code this will fail and it's perfectly normal. It happened to me a million times. You just have to take a look at the exact error it is telling you and then you have to go ahead and fix that. Now there is a way to skip that part if type errors are not important to you.

By going inside of next.config and instead of here, type script, ignore build errors and set it to true. And save that file And once you do that, you should see the same result as me. Basically I would recommend you don't do that. Just go ahead and fix your type errors. You've come this far.

You can certainly fix a few bugs here and there. And once you have this successfully running, you are ready to deploy. So one last thing I have to do here is push these changes. So I'm going to do that this time without any pull request. I'm just going to push it directly to my main branch.

So I'm going to stage this file 30 deployment commit and synchronize changes. And once that is pushed to GitHub, we're going to go ahead and head to Vercel.com. Go ahead and create an account here, click add new project and it should automatically connect to your GitHub. So here it is, NodeBase. I'm going to click import right here.

Okay, this is my specific situation. So I am deploying from a private GitHub organization. You are probably not doing that. So very easy fix for me. I just have to switch my account here just a second.

All right, I am now in a new account. Again, for you, this will not be a problem at all. The problem is I have, as you can see, an organization. So it's not the private repository is not a problem. The problem is I'm using a private organization.

So that's a premium feature on Resell. But for you, it will be as simple as this. You will see this page. Everything should be working for you. So make sure next.js is select.

You don't have to modify anything here except environment variables. And thankfully, there's a super easy way to add all of them at once. Just go ahead and copy everything, go ahead and click paste. That's it. So obviously we're going to have to change some of these things but for now let's just go ahead and deploy.

And the one thing we don't need actually is ngrok URL. You can get rid of that. As I said, encryption key should be something different. You should call this my production key. Well, not that.

You should make it your production key. There's a million services online that you can use to help you with that. So in here, it looks like I have some warnings but that should not break the app. So I'm just going to pause the screen and we're going to see the result of the build. And here we go.

After a successful deployment you're going to see congratulations You just deployed a new project and then to your organization name or to your profile name. So what you should do now is click continue to dashboard right here. And this is important. This is your domain. So don't confuse it with these domains.

These are something else. These are specific preview domains for that deployment. But your main domain is this one, this shorter one. So you can go ahead and visit it, feel free to do that. It should work just fine.

But it does need a few changes. What you should do is you should copy the URL and then you should go inside of settings so instead of your project, right, click on, let me just refresh here, whoops, click on NodeBase, go inside of settings, environment variables right here, and then we have to change some things. So database URL is correct, better out URL should be changed. So let's go ahead and edit better out URL to use this and just remove the trailing slash and click save. And then you have to do the same thing for all other places.

So let's see, I think we have a polar success URL is localhost and next public app URL is also local host. So we should change both of them to use our new app here. So let's click save here and same thing for next public app URL. So edit that and save it here. There we go.

But we are not done just yet. We also have to update our keys, client ID, client secret for GitHub and for Google. And obviously we should also do a new database URL because everything that we just had was for development. So what I'm going to do is just show you how to change GitHub and Google client IDs so that they work with your production. So head back to GitHub developer settings, new OAuth app, NodeBase.

You can just do NodeBase or NodeBase Prod, whatever you prefer. This is now your homepage URL. And for your authorization callback URL, I already forgot what it is. Let me just go ahead and go to BetterAuthAuthentication.github. Here it is.

So forward slash API auth callback github. There we go. This is authorization callback URL for production. Go ahead and click register application, copy the client ID, then go inside of here and find GitHub client ID. Go ahead and change it.

Let me just check, did I copy it? Okay, GitHub client ID and click save. Then you're going to have to generate a new client secret, Copy that and find GitHub client secret here and change it and click save. Great. So that is GitHub taken care of.

Now we have to do the same for Google Cloud Console. Maybe it would be a better idea to like create a new project. Maybe not, I'm not even sure. But yeah, I think personally I would create a new project. So I'm just gonna call this node-based prod.

And I will click create right here. Once it's been created I'm going to go ahead and select it and then we're just going to go through the entire process again. So let's this time start with OAuth consent screen that will redirect us to Google Out Platform. Let's click Get Started right here. Node base.

This. Next. External. Next. Let's add email.

Next. I agree. Continue. Create. And once it's created, let's go ahead and go inside of clients, I think.

Yes, Create client. Let's go ahead and select that application. Name will be node base. Well, it can just be node base. And now for authorized JavaScript origins, well, this will be your real URL now.

And for authorized redirects URL you can visit BetterAuth. So this will be forward slash API auth callback Google here. There we go. Let's go ahead and click create right here. And now you have a new client ID.

So go ahead and find Google client ID, edit it, paste it here, save it, and you should have a new client secret. So find Google client secret, edit. Is it exactly the same? Or maybe some slight changes I didn't even notice. Okay, just make sure you add it here and click save.

And you should also edit your encryption key obviously to something secure, my secure production key, please don't write this, just search for encryption key generator and paste it here. And great. Once you have all of that changed, So we changed better out URL, polar success URL. We can show, okay, database URL should also be changed, but fine. It can be the same for now.

Better out, polar success, next public app URL, GitHub client ID, GitHub client secret, Google client ID. Everything was changed for production. And you can use either the redeploy button from here and you can go inside of deployments here. Click here, redeploy. And just I can't dismiss the button.

Okay, just redeploy. Okay. There we go. So I'm going to pause the screen and after redeployment, you should be able to use GitHub and Google and it should be in a much better state for production than what it was. And here we have the redeployment successfully working.

So we can now again visit this application. Nothing much should change now, but we should have working GitHub and Google now. You will again see the authorized screen now because we just changed the client's tokens right. Both Google and GitHub should work here. And if you want to change your database I don't know why I didn't show you this because it's super simple to do using neon.

You have branches so you can just go ahead instead of your project or you can just create a new project if you want to like node based production. But they have branches here and you can just go ahead and click create a new branch and maybe call this, I don't know, production, even though they already have production and we've just been using it here. But you can see they even prepared development for me, I didn't even see that. And the cool thing is you can even expire the branch. You can choose what data to include.

A lot of very cool things. So I think what might be the best solution is to actually use the development branch which we already have here And just use the Prisma connection string here. This one and add it to your project here. And then you will use the development branch when you develop locally and you will have the you already have the correct database URL for production since that is the default one here. Amazing, so that's it.

That is the entire project developed. Amazing, amazing job. Thank you so much for going through the entire project with me. I think it's almost 24 hours long. Amazing, amazing job.