In this chapter, we're going to go ahead and deploy our app to Vercel. This will include the initial deployment. After that, we will obtain our app URL. Then we have to update our environment variables with that new URL and we have to redeploy. And after that we have to connect Ingest to our Vercel project and redeploy once more.
And after that we are ready to test the app. So let's start with step one, deploy to Vercel. So make sure that you are on your main branch and make sure the last one was 19 bug fixes. You can synchronize your changes if you haven't already. And at this point you can also shut down your terminal.
No point to have this running while you are deploying. Now let's go ahead and make sure that you have a GitHub repository, right? I don't know if you follow the Git workflow through this tutorial, but if you have, then you have a GitHub repository. So head to Vercel and click add new project and in here if you are connected with GitHub you have your project right here. I'm going to click import and then I'm going to open environment variables and in here I'm gonna go into .environment and I'm going to copy all of them and then I'm just going to paste them inside.
So database URL, next public app URL, open AI API key, E2B key and all of these other ones And let's click deploy. We are now going to see the result of this. Perhaps it will succeed from the first try or maybe it will fail. I'm going to pause the screen and show you the result. And my deployment failed with a bunch of errors and I forgot about the first rule of deploying to Vercel and that is that you should try building locally first so you don't waste time with failed Vercel deployments.
And we also forgot about one more important thing and that is that when we deploy the Vercel we need to add a post install script. So let's go ahead and do a post install script and add it to our package.json here. Let me just add it here. Let me just check where do we add it in the scripts. Okay.
So post install Prisma generate like this. So now I'm going to go ahead and do npm run build locally and I'm gonna see if I have any more errors and I'm gonna show you how do you trigger a Deployment again if your initial one failed Basically from here you have buttons to go to project or to inspect deployment. You can click whichever one you like. And from here, you basically have your project vibe. You can click here and there we go.
You have deployments. The first deployment was failed. And now the way another deployment will be triggered is simply whenever it notices a new push in the GitHub. So now let's go ahead and see what we have here. So I seem to keep having these errors seemingly coming from here.
These errors seem to be coming from source generated. So it seems to be linting this folder when it should not be linting this folder. So I'm going to look into how I can prevent the app, the build, from looking at the generated folder right here and I'll tell you what I find. Okay, I have managed to found the combination which enables npm run build. So just to remind you, the last change we did was we added post install to the scripts.
We still need this regardless. So there are different ways you can fix the failing lint because the failing linting is what's going on here. One solution is to go to the next config here and add slint and enable ignore during builds. Now this isn't exactly recommended but you can see that once you add this slint will not fire during the build process or at least it won't fire in production. But you can see that in here, it works perfectly fine now.
Well, whereas if you don't have this feature and you try npm run build, it is going to fail, because it will try to lint our source generated folder. There we go. But I don't really recommend this simply because that will turn off linting for your entire project during the build. And there's no need for that. Because what we can do instead is we can go inside of slint.config.mjs here and we can open ignores and in here we can target asterix asterix forward slash generated and then everything inside of a generated folder.
So basically ignore wherever you can find the generated folder and then everything inside. And I feel like this is a little bit better solution simply because we are still going to lint the rest of our project, but we are not going to lint the source generated one. So if you try this now, it should work. Let's wait a second, and there we go. Since the linting has passed, everything else seems to be working just fine.
So try for yourself and choose one that works, right? If this works for you, sure, then use this. But I will recommend doing this if possible for you in the slit config mjs. Perfect. Once you have these two, let's go ahead and let's merge them like this.
And let's go ahead and add deployment here. We can do this in the main branch, we don't need to branch out. And then just go ahead and synchronize the changes. In case you branched out, no problem. Just merge the branch to the main.
And once it detects a new branch to the main, it is going to trigger a redeployment. There we go. So in here, you can see that it automatically detected a new push, and it's going to deploy. So let's see if it succeeds this time. And here we have it.
This time, the build succeeded. And now we have our app deployed. So you can see it's still running some final things here but down here you can see that we assigned a custom domain and we have the deployment summary. So what I care about is the custom domain. So what I recommend you do is you click on the vibe up here and go inside of overview and in here you will find all of your domains.
Do not use the deployment domain, use this one, the shortest one. That is the domain of your project. You can go ahead and visit it if you want to. And what I want you to do is I want you to copy the URL that you have and I want you to go back to Vercel and then go inside of settings and environment variables and in here find next public app URL and you now have to modify this to be your new app. Just remove the forward slash like this and click save.
And After you do this, you can see a prompt here to redeploy so you can click it If you don't get the prompt to redeploy you can manually go in your deployments And then you can select the last one and you can click redeploy So let me just check if I'm not sure if redeployment is now happening or not. So I will just click redeploy myself and just confirm. So every time you change environment variables, you have to redeploy. So I'm going to pause, wait for the redeployment, and then we have to connect ingest to this Vercel project. And here we have the successful redeployment here.
So now what I suggest you do is just try and use your application. If possible, wait out till this shows a success message as well. There we go. And then go to your main URL here, always use the main URL, and try something simple like signing in. So I'm gonna go ahead and use my account here, and I will try to just create a simple project so I will go ahead and do you can see that all of our projects are saved so our TRPC is working here let's try clicking on one of these and let's try sending a message so I will add test here and what should happen here is the following you can see the message my message was generated but ingest was unable to be fired that's because we need to connect ingest to production so this will actually never finish Let's go ahead and do that now.
So use the link you can see on the screen or the link in the description to visit Ingest and go ahead and sign up. I suggest using GitHub simply so you always have access to your repositories if needed. And then once you enter here, down here at the bottom you can choose to switch organization. I recommend creating a new organization so I'm going to call this Vibe. And I will click create organization.
And I'm not going to invite any members now. And let's go ahead and click on apps here and let's go ahead and just find oh sorry integrations I think this is what I'm looking for and let's click on Vercell here to connect let's click connect Vercell to Ingest and click on add integration here and I have multiple accounts so I'm going to select this one where I just deployed the project and I will click continue and in here go ahead and find your new project. So let me just find Vive. Here it is. Select it and click save configuration right here and click continue to the Ingest Vercel dashboard.
And now somewhere in here you have all of your Vercel projects and you should now find Vibe and you can see it says enabled. But in here it says deployment protection is enabled. Ingest may not be able to communicate with your application by default. Let's go ahead and click more here and basically what we have to do is we have to configure protection bypass. So in here let's go ahead and I'm never sure how to properly access this so don't worry I will tell you the exact steps in the Vercel dashboard but let me just see does this take me to Vercel it does take me to Vercel here basically I think this is where I need to go Let's go to Vercel and let's select our new project here.
Let's go inside of settings and let's go inside of deployment protection. Here it is. So go inside of your vibe, settings, deployment protection and in here let's go ahead and let's do protection bypass for automation so I think this is what we need so let's click add secret you don't need to add any value and just click Save and then in here you can copy this bypass secret And then let me go ahead and go back and click on configure here. And if I remember this correctly, you should now have deployment protection key that you can add here and click Save configuration. There we go.
So now, Ingest should be able to access your Vercel application. And let's go ahead and do one more thing here. So now I want to go back here to production. And in here, there we go, you can see that my app was already found vibe development on the Vercel. So this is a good sign and it has found one function code agent.
So I think that this means that it's running successfully. I'm just not 100% sure. I keep thinking that I need to redeploy. So let's see. Let's try it out.
If it doesn't work, it means we have to redeploy. So go to your deployed URL this time. And let's go ahead and build a calculator app. Let's see if that will work. And let's go inside of Ingest here, Ingest Cloud, Ingest Runs.
And let's see if a new run will appear and the new run is right here that would mean that we successfully deployed our project and we connected ingest to deployed instance and looks like we didn't need to redeploy at all Let's just go ahead and wait to see if this will actually work, if there are any issues we have to fix, and then we're going to be able to wrap up this project. And here I have the result, So it seems to be working. This is entirely in production. So my URL is vibe-ebon.vercel.app. And if you check the cloud here, there we go.
It seems to be working. If it still says running, just do a refresh and it should update the status. Here we go. Amazing, amazing job. You finished an amazing project.
I had so much fun building this. I I'm sure you did as well. Make sure to test your app, you know, make sure everything's working. Sometimes the easiest fix can actually be for you to redeploy again. And you can see there was obviously a deployment that was running the entire time.
So perhaps this happened automatically when we connected Ingest. You can always, you know, click here and click redeploy and that will just redeploy your latest version. And now in your settings environment variables you should now see ingest event keys and signing keys. So that's the trick, that's what made it work. Amazing, amazing job.
I think this was an absolutely amazing project. Good job. See you in the next tutorial and thank you