So just before we deploy I think I've noticed one small little bug in the previous module. It should be a very very quick fix. Inside of my lib folder for my search service here I added the select for user ID name is live but I only did that for the if is user ID. I forgot to do it for else, right? But I think still it would work exactly as expected but we are sending too much information there.
So let's just change this to be select and we can just copy this from here. So select user ID, name is live, thumbnail URL and updated at. And let me go ahead and paste that here. And there we go. It should all be completely okay.
So let's just try this out. So if I go ahead and write test here it's okay it's working if I write Antonio it's working if I log out from here the home page is working if I write Antonio here it is still working and just one thing that I want to add inside of my middleware we technically do allow this but I want to explicitly also add slash search right Because I think search is allowed for logged out users because of this but I also want to explicitly add search just so we know that we want this page to be allowed. Great! And we can still look at the stream. We have absolutely everything inside.
Amazing, amazing job! So in order to deploy this we first have to add this to our github so let's do one last thing which is to go inside of package.json and inside of your scripts object you should have a new script post install which is just going to say prisma generate like this and then what I want you to do is I want you to go and you can now finally shut down everything so let's just have one terminal open and let's just prepare this like that this should be offline now and Go inside of your GitHub and create a new repository. So I'm going to name this Next14TwitchClone and I'm going to go ahead and make it private and I'm going to click create repository like this. And now inside of here, you're going to use the second option which is to push to an existing repository from the command line before you can do that make sure that you have no outstanding changes so you should not have any numbers in this icon here so do git add and git commit and you can see that my commits have a specific number by the well number of the video that I'm doing so this for me is 33 deployment for you it might be just final it doesn't matter so just commit this like that and then you can go ahead and copy these three commands here so let's go ahead here and just paste them and enter and that should push the entire repository right here so now when I refresh my github there we go You can see that I have my entire repository right here.
Great! So now let's go ahead and let's go into Vercel and go ahead and select add new project and go ahead and select your latest one it should be right here next14-twitch-clone and click import. And now let's go ahead and let's fill in the environment variables property. So for that go inside of your .environment file you can click copy everything you can literally select everything from here and then just paste it inside like this. So make sure you have all of them and go ahead and click deploy.
So we are gonna have to change a couple of stuff after we deploy. We're gonna have to change the Clerk webhook secret or maybe we even won't. I'll try to explain in a second. So now let's go ahead and leave this building to do its thing. If it fails I'm gonna unpause the video and show you where it fails and how to fix it.
If not we're gonna have a deployed app. And there we go! So mine seems to have deployed without any issues. Great! So now what I'm going to do is I'm gonna go ahead and click let's see continue to dashboard.
We need to get the URL of this page right here. So there we go. Next14 Twitch Clones. So make sure that you don't use the deployment URL. Vercel will give you two URLs.
Make sure you find this one. It should be much shorter than the other one. So I'm going to copy this now and I'm going to go ahead and replace it in my local host here and in here I should be seeing the exact same page right great and here's the thing now that we have this URL what we have to do is we have to modify the clerk webhook and the livekit webhook so that they no longer use the ngrok because ngrok was only for development. For deployment we don't need that because we have an actual URL. So you can do the following.
You can either edit the endpoint and change this part of the URL to use the new one, right? Or you can add a new endpoint. So let's go ahead and give this a name of deployment or production. And let's write HTTPS and paste this which is from vercell slash API slash webhooks slash livekit so make sure this is correct and make sure you select well you can create a new API key if you want but you know for this tutorial I'm just gonna use the same one so we don't have to change all the keys but it is a good practice that you you know create production keys later but for now just use the exact same one that you used in your previous webhook endpoint and there we go this should now be working and you have to do the same thing in clerk. So what I'm gonna do is I'm just gonna edit this one.
If you want to you can create a new endpoint but remember when you create a new endpoint you also need to update your signing secret which is in our environment file. So that's why just for now it's easier that you simply modify this webhook. So click edit and change this part of the URL here. Like that, let me add HTTPS at the beginning. Like that, so our versal URL slash API webhooks clerk and click save like this and that should be it so let's go ahead and try this now so I'm gonna click start streaming I am on my deployed app and if I set up my webhooks correctly in a couple of seconds this should turn to live and it is and let's take a look if we can stream.
We can! I'm right here and I'm looking at my screen on the deployed website. Amazing, amazing job! You finished the entire tutorial. I don't even know how long this is.
15, 16 hours? Something like that. Amazing, amazing job. Thank you so much for watching. Remember to leave a like, share and subscribe.