In this chapter, we're gonna go ahead and deploy our project. We're gonna start by creating a new project on Vercel, configuring convex, configuring ingest, and finally testing out if everything works. So using the link on the screen, you can visit the Vercel or simply visit vercel.com. And I would recommend creating an account or logging in with your github so all of your repositories are automatically synchronized. Once you log in you will see a dashboard similar like this and go ahead and click add new project.
In here You will see a list of your repositories and here is our repository Polaris. Let's go ahead and click import. Now in here the framework preset is already recognized but we're going to have to do some modifications to the build command and to the environment variables. So for the environment variables the first thing we're going to do is simply visit our environment variables right here. Let's just copy all of them.
That's always the easiest thing to do. And you can just paste them. And all of these will be added. Convex deployment, nextpublics, convex URL, polaris, convex internal key. Every single one of these here is going to be added.
But that's not all we need. So if you look at convex's documentation and head into production, Vercel, in here they have the Vercel marketplace integration. But since we already created our own Convex team, we are better off following these instructions. So just scroll a bit down basically until you see connect your convex project to Vercel. So we're just doing this right now and what we have to do is we have to override the build command.
So this is the command that's gonna have to be the build command. Npx convex deploy –cmd npm run build So let's go ahead and open build and output settings and change the build command instead of next build to be npx convex deploy – – npm run build. Alright, let's see what else we have to do here. So we have to set up convex deploy key environment variable. So let's go inside of our project settings.
So make sure you're inside of your project here and in here you have your project settings and click generate production deploy key to generate a production deploy key. So right now in here you will see that this is a personal development convex. Right? Usually what you would do in production is you would switch from development to production right here. Keep in mind that by doing this, you also have to add all of the environment variables and this is basically a completely blank slate.
So just because it's easier right now you can stay in the development instance and in here you have all of your environment variables if you want to you know for real production cases later on you would obviously want all new environment variables you wouldn't actually reuse any of these all of these should be local right but if you want to they offer you an easy copy all which you can then add in your production. But for now, let's stay in development and let's go ahead inside of URL and deploy key. Click show development credentials and let's click on generate development deploy key. So the name for the deploy key, I'm just gonna call this Polaris. Let's go ahead and click save.
And here it is. This is our key. So just go ahead and copy it. And let's see under what key do we store it. So we store it under convex deploy key.
So let's add one more convex deploy key and let's paste that in here. All right. So that's it for the convex. We also have to set up ingest, but it's easier to do that after we deploy. So for now, let's just hit Deploy with all of these things here.
And we're just going to see if it fails, if something goes wrong. So this is why we tested the build command locally, so we don't have to watch it fail here but still it's possible to fail so let's just see if it succeeds or not. And as we can see my project was successfully deployed though we need we are not ready yet right So what we have to do now is we have to visit ingest and we have to create an account because so far we've only been using it in general. So I'm going to go ahead and log in. Once you create an account I would recommend clicking down here and clicking on switch organization and click on create new organization.
This way everything you do for this project is isolated. So I'm going to call this Polaris and click create organization. And let me go ahead and just try Polaris and some unique slug. There we go. Now we have a new organization and what we're going to have to do now is we're going to have to integrate ingest with Vercel.
So click on integrations and find Vercell and click connect. So let's go ahead and let me just zoom out a bit so I can see. There we go. So click connect Vercell to ingest and this will open redirect to Vercell. Click add integration here.
If you want to, you can add it to all projects or you can choose specific projects. Alright, so make sure to select your organization where you have it here and then go ahead and continue. So if you used Ingest with Vercel previously, there is a chance you're not seeing your project here. For example, right now I cannot see my project. I even tried creating a completely new account on Ingest to see if it was because of that.
I tried clicking this again and again. You can see I already have it installed here, right? But it still didn't load my Polaris project. You can see it only loads my old project. So I found out that if I go inside of Vercel and click on integrations in here I can now see Ingest and I can go ahead and click manage, manage access and now I can select Polaris from here I can even remove my old project or I can simply choose all projects.
But for example let me just add Polaris and click save. And now that I have that I'm going to go ahead and try refreshing this a few more times to see if now it's going to appear. So I'm going to connect to Vercel again. Click here where it's already installed and we're gonna see. There we go.
Now it works. So let me go ahead and click Polaris and save configuration. So now this will automatically add ingest signing key and ingest event key to our environment variables. So you can see that Polaris is now enabled. Let me just click configure here to see what else we have to do.
And I think that we can also take a look inside of our Vercel. Let me try and find my projects. Here is Polaris and in Polaris here, let me try and find the environment variables. Just a second, they've changed their sidebar, so I'm confused a bit. Switch to old navigation.
Let me try and find... Okay, so here, settings, I can find environment variables. And you can see we have ingest event key and ingest signing key. Alright, I mean we were just confirming whether they are there or not. And in here we have a warning where cell deployment protection might block syncing.
Use the deployment protection key option below to bypass. So let's go ahead and try and learn more about that because I think this will improve the way this works. So basically just click on your project here. Right. Click on Polaris.
Let me go ahead and see how we can find this app back. Okay. No sinks found. I think once these two have been added, we also have to wait until the deployment finishes. I forgot about that.
Yes, this also automatically triggered a rebuild of your app. So whether you are on the new navigation or old navigation, simply find your deployments and you should probably see another deployment happening here like this. And once that is finished, there we go. So successful again. And now it should be found.
There we go. So something is happening, but it is failing probably because of that thing it warned us about that Vercel might be blocking it. So we have to fix that protection URL. I'm just trying to find my way back here. So you can always go to integrations, click on Vercel manage.
And in here, there we go, you have Polaris project. So let's click configure here again. And let's see what's up now. So okay, still that warning. So I'm going to click learn more under the deployment protection key here.
And let's go ahead and see what we have to do. So we shouldn't do this. We should configure protection bypass. Keep in mind that this may or may not be available depending on the pricing plan, but I think it should be available. So to enable this you will need to leverage Vercel's protection bypass for automation feature.
So let's go ahead and enable it. Protect bypass for automation. So we're going to go into our cell here. Make sure to select your project. Let's go into settings.
And what was the name of that feature protection Bypass for automation. Here it is. Let's go ahead and click add. And I'm just going to give this a name ingest and I will leave this blank. So it generates a secret.
Great. Then I'm going to go ahead and copy that secret here and I will add it here and click save configuration like that. And that should fix this problem with Vercel blocking the sync. I think we just have to wait a second to see if it starts to work. API ingest is correct.
And, okay, let's just go back and see if maybe this will now start to work. At this point, we can already visit our app to see if something else might be broken. So when it comes to your app's domain, make sure to use this one. There's a difference between a deployment URL and your actual domain for the project. So let's go ahead and start with this one.
As expected, we are unauthorized. And now we have to log in now which is gun. I had been logging in with get up here and looks like I have my project here. So let me go ahead and create a new one and I will try and do a simple react plus a beat to do app. So this will be interesting because we have to see whether it will actually start doing this or not.
So let me check my runs here. Looks like no runs are happening right now so perhaps it was not yet synchronized. So let's see. Checking the app help. So I'm going to go ahead and I will copy my app URL here, paste it here, API ingest, and I will click check.
No issues found. So it looks like it can successfully connect to it. And sometimes you just have to wait a bit until it starts to work. Let me go ahead and find some details here. Polaris Perhaps yours is already working.
Maybe it's just mine that is stuck. So okay. I'm trying to find. Maybe it's in a different environment. Yes, this is still not working just yet.
So I'm going to go back into my integrations here. I will go into our cell And I will go back into Polaris to see what's going on. Okay. Maybe I just have to restart it somehow. So let me try some things and see what works.
So what I did just now is did another deployment, perhaps after we enabled that deployment protection, we have to redeploy. So we're gonna see if that maybe fixes it or helps in just recognize the app. Because still, if I go into integrations here and select my over cell, I think I still get that warning here as if the deployment protection didn't work. I think once this is successfully synchronized, it should work. So we're going to see if it changes after the deployment.
And in case you don't know how to do a redeployment, you can just click on the last deployment that worked and click redeploy. And looks like redeployment was the fix. You can see that now in my apps I can find Polaris. So that's what I forgot to do. They in fact instruct you to do that.
I just didn't read thoroughly. So before syncing with Ingest, ensure that the latest version of your code is live on your platform, right? And even in here, if you go inside of Protection Bypass for Automation, they tell you that they actually add an environment variable, which is a clear indicator that we should have redeployed. And you can see that now I have a synchronized Polaris app and all of these functions right here. So let's go ahead and prepare the runs screen.
Let me start a new app, create a Vite plus react to do app. Let's go ahead and run this. And let's see if that will trigger a run or not. There we go. You can see the run is now happening right here.
And hopefully we will be able to see some project. You can see that the conversation has just been renamed so the ingest is definitely working in production. We just have to see if the files and the communication with convex is working. And here we have a real-time preview and a finished app in production. Amazing.
Everything works great. If there is one thing that's on my mind, perhaps it would be when we created the GitHub OAuth app, we created Polaris, I think, and the homepage URL is set to localhost 3000, so perhaps you might wanna change it to your new app's URL, but looks like that's not causing any problems. I think this is what's important. Right. But this is completely independent because you get this from clerk not from wherever our app is deployed.
That's like a very cool thing about clerk. Great. So yes in case GitHub is causing you some problems, try changing the homepage URL to wherever your app is deployed and click update application, maybe redeploy. Amazing, I believe that marks the end of this chapter. We configured the project on Vercel, configured convex, configured ingest and tested out the deployment.
Amazing, amazing job. Thank you so much for being with me through 17 chapters of this very long tutorial and see you in the next one.