So, last chapter, deployment. Our goal is to add the project to Vercel, add the environment variables, change the webhooks to new Vercel URL, and connect InGEST. Let's start with the first one, which is add the project to Vercel. So if you followed along with my Git workflow, you will most certainly have your GitHub repository here. If you don't, you need to add your project to GitHub.
You can see how I do that in the first few chapters, right? So you need to have your project here. After that, go ahead and create an account with Vercel. Go inside of your project and click Add New Project. Connect it with your GitHub and you will have access to your project here.
Let's go ahead and hit Import. Open the environment variables, open your environment variables here, copy all of them, and simply paste them in the first field and that will populate all of them. Let's go ahead and let's click deploy. We will not be done yet because for example we have to fix this. This is incorrect.
We also have to fix this. That's also incorrect. So let's go ahead and click deploy here. After a few seconds, we're going to see the result. Maybe we're going to see some errors in the logs, or it will succeed.
Regardless, we're going to proceed forward after we see the results here. For example, I immediately found a bug here and I think I know why. So I think I know exactly what I have to do. Let me go back to my project here. Let me go inside of settings.
And let's go inside of build and deployment and install command let's override it and let's do npm install dash dash legacy here depths And let's click Save. Now let's go inside of Deployments here and let's redeploy. And click Redeploy here. I'm going to follow closely along and see if we have any more errors. And there we go.
Seems like adding that override and npm install legacy period apps resolved all issues. And now I have the new domain here. So this is my main domain, right? When you deploy you will see these other domains make sure to go inside of your project here overview and find your domain here this is your main domain so what you have to do now is go inside of stream go inside of your app and in here where it says updating these settings will affect both chat video and audio you have to modify this to no longer be your webhook but instead be your actual app let's just remove the sign-in part there we go your actual app Now keep in mind that this will then break development. So the good thing to do would be to create two projects and then use different keys for both.
But I'm just trying to simplify it for the tutorial. So now change this, but be mindful, this will break development. So later, you're gonna have to revert this back to your whatever it is in the package. Jason, right back to this. So please remember that write it down if you need to.
And let's click submit here. There we go. That changed. And now we have to do one more thing and that is go inside of our project here. Inside of settings, inside of environment variables.
And let's go ahead and let's find the BetterAuth URL and let's edit it and replace it with our deployment now and let's click Save here and then we have to do the same thing for our next public app URL. Edit it and replace it and click Save. And looking at my environment I think those are the only instances where we used our localhost so we have now changed it to this. Great so now what I want you to do is go inside of deployments and click redeploy one more time. So what this will do is restart the project but with new environment variable set.
So now the authentication will work and the TRPC will work as well. After you have redeployed here are the next steps. So right now, if you try Google or GitHub login, it will not work. That's because we have to go ahead and actually fix something here as well. So let's go inside of our GitHub developer settings here.
And in here, find the homepage URL and just set it to this. And in here, change the localhost part to be HTTPS API out callback GitHub and update application. Keep in mind that this will break development, so it would be a good idea to create a different app to handle that. And you have to do the same thing in the Google Cloud Auth platform. Go inside of your clients, and in here change this to your new URL and click Save.
And let's also go ahead inside of branding here and find authorized domains and add the domain here. And let's just do this and click Save. And besides this, let me just double check in the clients, I think we also might need to add authorized JavaScript origins and just add this here and click save. You can never be too sure with Google out. Okay, then one more thing that we have to do is we have to properly connect Ingest.
So go ahead and create an account, create an organization and then go inside of your apps and click take me to onboarding and select sync with Vercel. And in here I'm going to click manage Vercel integration and I will click connect Vercel to Ingest. And I will select my free account here And I will click Install. And let's go ahead and select our project. And click Save Configuration right here.
And that will add Ingest Signing Key and Ingest Event Key. So let's go ahead and click continue here. And you can see that all of these other projects don't have ingest, so it's not going to be found, but it is enabled for Meet AI. In here it says ingest might not be able to communicate with your application by default. Let's click learn more here.
So bypassing deployment protection. If you have Vercellis deployment protection enabled by default, Ingest might not be able to communicate with your application. Okay, so let's go ahead and see how we can work this. So we can either disable deployment protection or we configure protection bypass, but this is only for premium projects. So it's better to learn how to do this because you can do this for free once.
So let's go ahead and learn how to do this. So basically, here's what you can do. You go inside of your Vercel dashboard in your organization. You go inside of Settings here. And in here, you find Deployment Protection.
And you can see that I have Deployment Protection for Meet AI. So when I click here, it redirects me to the project settings here, Deployment Protection. And in here, I can either turn it off completely, or I can create a protection bypass for automation. So this is exactly what the Ingest would need. So I'm on my free account here, so I'm going to try to do that, but I'm not sure if I can do it.
So I'm not going to select any value here. Let's just click save and see what happens. That creates the value for us here. So let's copy this. If you fail at doing this, you can just disable it all together.
So now it says to do the following. We copy the secret and we go to Versel integration settings page in the ingest dashboard. So let me see how I got here. Let's just see. I'm trying to find this.
So inside of here, we have integrations, Vercel, manage. And now in here, let's find MeetAI, let's click configure. And in here, let's add our deployment protection key, like this. And now, let's go ahead and let's redeploy our app because I think that's the next step. So I'm going to redeploy our app and then I will simply try and you know use our app.
So let's go ahead and redeploy one more time. And after I redeployed, if I look here, it says it has successfully connected here, right. And it has the function meetings processing, which is basically our function to process the meeting. So the only thing left to do really is to try our app. So I'm going to go ahead and check, do I have any agents?
I do. And I'm just going to go ahead and actually, I don't know, start this meeting. Let's go here. I will allow the camera and everything. And now I'm going to allow my microphone.
And I'm going to try and do a conversation here. And there we go. So I just ended the call. Let me just show you. It's in processing status here.
And you can see I have Ingest running here. And it's going to go ahead and do the steps. So Let me go ahead and check this out. So you've probably noticed that my ingest steps are the color red, indicating that they have failed. So what's happening here is my initial step, step.fetch, is actually failing.
So what you can do to fix it if you have the exact same error is simply turn this into a normal fetch. So go ahead and add step.runFetchTranscript and simply call your normal fetch method and then return it into text format. And then in your next step you can go ahead and remove what was the response.text transformation here. Because now we get it directly from this fetch return. So you can just pass the response inside of JSONEL.parse and then continue with all other steps as normal.
You can then go ahead and commit these changes, push them to your main branch either via a pull request or directly, and then redeployment will start automatically and go ahead and try again. One last thing we can do before we end this tutorial is adding a proper redirect away from the homepage. Because right now, if you take a look at our dashboard page.tsx, all it does is renders a home view, which renders the exact same text inside. So it's not really useful for us. So what you can do is you can go inside of next.config.ts and inside of here you can create an asynchronous redirects function which targets the root page and redirects everyone to forward slash meetings and you can set permanent true or false both will work but be careful with permanent true simply because that is a specific instruction on the internet, right?
That's how your website will be indexed. So you can research that a little bit. And also, once you do this, if you test it out locally, it can happen that when you open your new project with Next.js, your local host immediately redirects to forward slash meetings. So if that keeps happening in your new projects, which don't have this set up, just clear your cache, open incognito mode, clear cookies, just do something like that and it will stop doing that. Or I think that you can just do permanent false and then it will not be as strict.
And then After you actually do this, you can go ahead and you can completely delete the page inside of dashboard. Your app will function just normally without it, right? And this will simply always redirect your app to forward slash meetings so it won't even look for that initial page. So go ahead and commit this and push to your main branch and redeployment will start automatically and go ahead and test your app. And that marks the end of this tutorial.
Amazing, amazing job and thank you so much for watching and see you in the next video.