So it looks like I have some time to show you how to deploy after all. Let's just fix a couple of bugs that we have. So I noticed while reviewing my last part of the video that inside of lib, inside of the subscription here, I was saying 86, 000 but I wrote 84, 000 so let's be correct and make it 86. Great and one more thing that I want to do so in actions when we create a board I make sure that I don't increment if I am on the pro right so we don't have some weird numbers so I think it would be fair to do the same thing when we delete the board so we wrap this in is pro so let's go ahead and check that here const is pro is await check subscription from at lib subscription make sure you have this and then I'm gonna go ahead and only do this if I'm not pro so if it's not pro only then am I going to decrease the available count. Great So now let's go ahead and let's actually deploy this.
So the first thing we have to do is we have to go inside of our package.json and in here we have to add a post install script. So post install and we have to run the command prisma generate. After we've done that we have to add that to our github. So go into github and click on a plus here and click new repository and now let's go ahead and let's give this repository a name so I'm going to give this next13trello like that I'm going to make it private and I'm going to click create a repository. And now what we are going to do is open up our terminal.
So we don't need anything running. So you can shut down absolutely everything from here, even the Stripe portal and the Prisma Studio. And let's go ahead and run git add git commit let's give it a message so as you can see I have my messages in numbers depending on which video part I'm on so this would be for me 25 deployment For you the message can just be you know initial commit or something like that. And now we have to push this. So let's go ahead and use this second option which says push to an existing repository.
So copy these three lines right here. And let's go ahead and add git remote add origin and let's go ahead and push this. Perfect! And now when I refresh here you should be seeing the entire project. Great!
And now let's go to Vercel and click on add new project right here and find that repository which you just created for me it's right here I'm going to click import and what we have to do now is add all the environment variables so we can do that quite easily by going inside of .environment and you can just copy absolutely everything from here select the first field and paste and there we go that's gonna fill up everything here. So after we deploy we're gonna have to change the Stripe webhook secret and next public app URL but we can only do that after we deploy. So let's go ahead and click deploy. If I get any errors I'm going to pause the video and we will resolve it together. So my deployment seemed to have failed because of this ShedCNSheet component that we have because the property class name does not exist on type DialogPortalProps.
So I googled the error and it looks like two weeks ago there was a comment here which explained that this was fixed for Dialog and AlertDialog but it looks like for the sheet it's only coming in the next release but for now we can do this we can npm install this exact Radix underlying package so let's try that I haven't tried it but I hope it's going to work so let's just go ahead and run npm install radixui slash react dialog with this exact version and let's go ahead and paste that inside great let's go ahead and run git add, git commit. I'm gonna write deployment fix here and I'm going to push. So make sure you do git push and that should automatically trigger the next deployment on Vercel. So you can click back on your projects here and then go ahead and select your project, click on deployments and there we go you can see that this fix deployment fix is now building. So I'm gonna go ahead and pause the video again and see if we have more problems.
Great! So that seems to have fixed my issues and I can now visit this on my deployed domain right here. There we go. The app is here and now we have to modify our Stripe webhook environment key because remember currently we created our Stripe webhook inside of the test environment so now we have to change that to use the production environment so let's click on the developers tab right here let's click back here on webhooks and here we go I have local listeners so now let's click add endpoint for hosted endpoints here and now we have to go ahead and we have to copy this url which we have paste it here and go to slash api slash webhook So make sure you don't forget the slash API here and let's go ahead and click select events and we are using the checkout session completed option so select that one and we are using the invoice, let me, invoice payment succeeded. So if you're not sure which ones we use, you can visit the webhook itself and in here you can see that we check for checkout session completed and we check out for invoice payment succeeded.
So those two are the ones we have to listen to and just click add events. So confirm checkout session completed and invoice payment succeeded and click add an endpoint and then you have the sign-in secret here and just click reveal and go ahead and copy this sign-in secret. And now we have to go back inside of Vercel here, select your project, go inside of settings, environment variables and go ahead and find the Stripe webhook secret here, edit it and paste the new version inside. It's going to be much shorter like this and we have to edit the next public app URL. If you try and take a look now you can see it's HTTP localhost 3000 but we have to copy the new deployment URL and just remove the last slash like this and click save and that is going to be it and after you change your environment variables go back to deployments select the last one which is working and click redeploy and just confirm the redeployment.
And that is it. Great great job, you finished the entire tutorial, thank you so much for watching, remember to leave a like, share and subscribe and see you in the next one.