Deployment

In this chapter, and hopefully our final chapter, we're going to deploy our app. In order to do that, we first have to fix all potential build errors. And we can easily find out all the build errors inside of our project using a command. So let's shut down our app and let's do bun run build. And now we will most certainly get some errors here and we're going to fix them one by one.

So make sure you do bun run build or npm run build whichever one and wait a second for the first error to appear. There we go. So let's go ahead and look at... I'm not sure if you have the same thing. Maybe for you something else was loaded but for me it's going to be use toast first.

So I'm going to go inside of use toast from hooks here and I will find the error here. Now here's the thing I'm 90% sure that I don't use Toast anywhere. Let me try. Use Toast, use Toast. We don't, we simply don't use use Toast at all.

That is because inside of our layout, the toaster which we add comes from Sonar and not from toaster. So even this use toast, which is used in this toaster, this toaster here is a different component. Ours is in Sonar. So here's what we can do instead. You can just remove use toast or you can, let's see, quick fix, disable for this line.

Now let's go ahead and run again and see what the next error will be. All right, let's see what happened. Error occurred pre-rendering the page subscriptions. Error encountered and okay, Let's see. Use search params should be wrapped in a suspense boundary at page subscriptions.

Okay, so here's the thing. We use use search params. And we use it instead of search inputs. Now, in this chapter, I remember telling you that maybe we're gonna have to add a suspense around this, but I thought that we wouldn't because of the export dynamic force dynamic, but it looks like we still do. So let's do this instead.

Export const searchInput like this and change this to searchInputSuspense. And now what we're going to do here is we're going to return suspense from React and give this a fallback, whoops, of a skeleton component from components UI skeleton with the class name heights 10 and full width. And inside, render the search input suspense. There we go. Let's try now.

When I first did this Bundle Run build, I also got a bunch of errors. So don't worry, this did happen to me in my development process as well. I also expect that we get some more errors actually this is this is quite odd that it's already working so that's good news But just in case yours isn't working, let's go ahead and double check. So what happened for me was my components UI was riddled with errors. So I'm gonna go into each of my components and just confirm that none of them have any errors.

Right? You can immediately see the file will turn red if there's an error and you will see the error here. So I just want to go through all of my components here just so I can confirm no errors here are happening. In case you are having some errors, you can fix them in like multiple ways. You can hover over something and use the quick fix, or if you're certain you don't use that component, you can just delete it.

Because, you know, remember, we added all components from ShadCN, even though we don't need all of them. But yeah, perhaps the version of ShadCN, which we used here, has resolved these errors finally, meaning that we no longer have any errors inside of our components here. Yeah, I'm going through each of them purposely because I want to make sure that my Bundlerun build isn't accidentally lying to me, but if Bundlerun build is working, that most certainly means that it's gonna be able to deploy. All right, I think we're getting close to end of our components here. And not a single one is showing any errors at all.

And these outside are our components. This one has some warnings here. Yeah, this is a weird warning. You don't have to do anything about this one. Okay, great.

I guess this means that everything is working. In case it doesn't, you can of course turn off SLIN for that one line. Basically, you have to fix the build errors. If you have some problems, you can always just do the same thing I did here. Where is it actually?

In use toast, this. Excellent, disable next line. So if you go into a component and see the error, just use quick fix and you can either turn it off for the entire file or you can turn it off for this line. Just use one of those and that's supposed to fix your issue. Great, but just before we do that, there is one thing that I think I forgot about.

Instead of my source middleware here, we need to add some more routes here. So besides protecting all studio routes, we also need to protect slash subscriptions. We need to protect slash feed slash subscribed. So I think that's what it's called. App folder, let's go.

Inside of home, I have subscriptions and inside of feed, I have subscribed. So that's what I'm protecting because there's no reason unauthorized users should see those pages. And also everything regarding playlists, all of those things should be private as well. So now I think we are pretty safe and we don't have to worry about API routes because we are either using TRPC or we are using webhooks, which are protected in a different way. And in the upload thing, what's important here is that we use auth in the middleware here.

So that's protected here. So in case you played around with this and you decided that you want to protect your entire app and then you decided to add public routes, you know, that's not something we did, but you know, some of you might experiment a little. Make sure to allow all API routes for upload thing. Basically, slash API slash upload thing should be allowed completely, right? We don't have to add it here because these are protected routes.

I'm just saying for the people who might have done the opposite thing for whatever reason, maybe they're just using this tutorial as a guide for something. So just a little tip for you. Okay, let's go ahead and just do a run build one more time Simply so I can convince myself that this is working as intended. There we go, it seems to be working again. In case you're still having errors, it could be that you are missing dynamic, force dynamic.

So make sure you added these to each page where we prefetch, right? Wherever we prefetch, we need to have force dynamic, otherwise it will not work as expected. Great! So we have that. Now what we have to do is we have to deploy this, I mean push this to GitHub.

So go ahead and prepare a new repository. I'm gonna go ahead and call this new tube like this. I'm gonna go ahead and set this as private and I will not add any of these things here. And let's create a repository. Now you have two options, you can either create a new repository or you can push an existing repository.

Since our already exists, let's copy the second part. And now you have to do git add and then git commit. The way I do my commits is by following the chapters. So this is chapter 38. So I type 38 deployment.

Like this. You can of course write whatever you want. It's just important to save your changes. You can see how I have a commit for each of our chapters here. And now let's go ahead and paste these three lines which we have copied from here.

And once you push this, you should see your app right here. When you refresh this page, there we go. This is your app. Now we have to go to versell.com. Go ahead and click add new project and select your latest project in YouTube.

There we go. And now here's what we have to do. We have to go inside of our environment variables here and we have to copy all of them from our .environment.local There's a lot of them here. Make sure you copy all of them and you don't have to paste them one by one. Simply focus on the field and click paste and it's going to populate all of it here.

And then go ahead and click deploy. You can see that we're going to have to change this. The next public app URL will have to be changed after deployment. That's simply because we don't know the domain yet. So this is why I recommended that we do Bundle Run build privately here first locally so we don't have to wait for errors to happen here and then fix them.

But it's still possible that we get some errors here. It could happen. But I'm going to pause my video now and unpause when it's finished or errored. And there we go. Just as I expected.

Since our build worked locally, it also works here. Perfect. So what I recommend you do is click continue to dashboard here. And then inside of here, you will see your actual domain from Vercel. So use this one.

Don't use these long domains. Those are domains for a specific deployment. You want to use this one. Right now, I think a lot of things will not really work here properly. So what you have to do is you have to copy the domain here and then you have to go inside of Vercel, go inside of settings, environment variables here, so make sure you're inside of that project and then we have to modify our next public app URL.

It's no longer localhost. So make sure you change this and make sure you remove the last slash. So it's just supposed to be like this and click save. And then there we go. You can see now you have a message, updated environment variables, click redeploy, and you can just select a production here and it will select you your last one and you can hit redeploy.

In case this pop-up did not happen for you, here's what you can do. Just click on deployments, you would select your last one and you would click redeploy. That's the same thing. So now I'm just going to pause and wait for this one to finish. And there we go.

This deployment works as well. And let me just double check. Is that truly all we need? Because I just remembered we also have the Upstash Redis URL here. And we also have the upstash workflow URL.

So I've completely forgot about this. This should no longer be our ngrok, right? In production that should be our actual domain. But maybe Upstash doesn't even use this environment variable if it detects production. I think I might have read that somewhere.

But just in case, I suggest that you go inside of your project and just go and do this again. My apologies for not telling you the first time. So just go ahead and find the Upstash, actually it's going to be under workflow, I think. Upstash workflow URL. There we go.

You should no longer be using the ngrok ones. So click save right here and redeploy again. But we're not done yet because we still have some webhooks we have to fix. We have to fix the webhooks for Clerk and we have to fix the webhooks for Mux. Let's start with Mux.

Go inside of settings, webhooks and make sure that you choose your next tube development. If you want to, you can also create a completely new project called new tube production, right? But for simplicity sake, I'm just gonna have the exact same thing simply because I don't want to add a whole new ID. But yes, in true production, you would create a complete new environment, which you would call new tube production. But then you would have to change all of your access tokens, all of those things, right?

For simplicity sake, I'm only gonna do the webhook now so you can have the app working. So go inside of YouTube development and create a new webhook. This time it's gonna go right here. And Let me just confirm. I hate how I can't see where this is going.

I think it's slash API videos, webhook. Let me confirm here. Slash API videos, webhook. It is, It goes right here. So I'm going to click create webhook here.

And now I have the new one here. And don't close this yet. Go inside of Clerk. Go inside of Configure. Go inside of webhooks here.

And you have to do the same thing for this one. So I'm gonna add an endpoint here, slash API users webhook. Let me just confirm users webhook, There we go. And I'm gonna go ahead and select everything for user. I think that's the only events we are looking for here.

Let me double check. Let's just see user created, user deleted, user updated. That's it. And let's click create. So now we have two new signing secrets we have to add.

So let's go ahead and start copying this one from Clerk webhook. And you have to go back inside of Vercel and we're gonna have to do one more deployment here. So go inside of environment variables for the new tube project and let's find the clerk. Is it clerk secret key? It's clerk signing secret, this one.

So you're gonna have to change it now and simply paste the new one inside. Don't redeploy yet because we also need to show the new signing secret or MUX. So copy this one and then find MUX, webhook secret and change this one as well and click save. And now redeploy one more time and hopefully this will be our last redeployment here. I'm gonna pause the screen and tell you when it's done.

There we go. Now I'm just gonna go ahead and try out some basic things in our project. Make sure you use the proper URL here and let's go ahead and try some things. Let me click on a video and you can see how instantly it starts to load then, right? Amazing!

And let's try liking something and we should get prompted with an error. Now let's go ahead and logging in and let's see if that works. That should work just fine here. It seems like we are getting some issues with our images here. So I am interested in that, why that is happening here.

All right, I resolved my thumbnails issue and my overall issue with the images. The problem was in where I deployed, basically. I had to change my team. I deployed in my account where I have like thousands of little projects and I've used up all the free tier so that's why the image optimization stopped working. That was the issue.

So for you, you probably did not encounter it at all. Great. And you can see that there are some issues like this. This happens because Max probably deleted the video, but we didn't change the webhook in time. And Now it's stuck like this in this semi state, but eventually, Max will try to fire the webhook again.

So then it's going to delete the video, or you can just manually go ahead here and delete the video from here. I also suggest that you try and fire a background job and then go in Appstash and just check that it now fires into your new domain right here. One thing I also did is I went inside of my upload thing And inside of my settings, my apologies, oh, inside of my project settings, I've added the app URL here because I thought the issue with my thumbnails was with upload thing, but it was not. It was something else. Excellent.

Amazing, amazing job. Keep in mind that on your local host, you're gonna have different web hooks, so just keep track of that. Thank you so much for following this tutorial. And if maybe I will release some more chapters for this course, and you will be able to see them on codewithantonio.com. Thank you so much for watching and let's go ahead and do this one more thing.