Vercel Integratation not Working

[dthreatt]

Describe the issue:

When trying to connect Vercel it allows me to add 1 branch/environment but not 2.

I tried to add if from both the Vercel side and the DatoCMS side. Neither one allows me to add a 2nd one after the first one is added.

I was able to add the production branch but when trying to add staging it wont give me the option to do it.

(Optional) Can you provide a link to the item, model, or project in question?

https://safetychain.admin.datocms.com

(Optional) Do you have any sample code you can provide?

On the vercel side if I press Manage Access

I get this. We only have 1 org and 1 project on Vercel

Deploy hooks are setup on vercel and working

Here is the production Build Trigger on Dato…all working and ok

Adding another one is not allowed or not working

Greyed out

If I switch to specific projects it allows me to choose the 1

but the install button doesnt work

[roger]

Hi @dthreatt,

Can I ask, please, what you’re trying to accomplish?

If you just want to use a staging frontend vs your staging env in Dato:

Sorry for the lack of clarity here, but your build hooks are not environment-specific, they are shared across your whole project.

Typically, you can make different frontend environments just by using Git branches and specifying an X-Environment header in your fetch.

As an example, I cloned our Next.js starter project, then made a staging branch for it:

Comparing main...staging · arcataroger/forum-4775-vercel-envs

The only real difference is that it specifies 'X-Environment': 'staging' during the query fetch. Once I commit and push that branch, Vercel will automatically create a new deployment for it:

That will build the staging branch on a new subdomain:

Does that help? Is that what you’re trying to do?

---

If you specifically want another build trigger just for staging:

If you want to make a custom build trigger inside DatoCMS specifically to rebuild your staging branch from the Dato UI, I think you can do that by making a custom Vercel build trigger: Creating & Triggering Deploy Hooks

That’d be a custom hook you manually invoke, vs the default Vercel integration that we provide for your production env.

But it’s probably cleaner to just push your staging branch to Vercel on a code change, and that way it will automatically deploy…?

You shouldn’t need to re-build the whole site on a content change (either on production or staging). If you’re doing static builds, Incremental Static Regeneration should let Vercel auto-detect changed content and regenerate just the relevant pages, instead of needing a manual redeployment of your whole codebase.

That overrides the fetch() function with an invalidation timer, after which Vercel will check the fetch against its internal caches and automatically rebuild the affected pages if necessary, without needing a manual redeployment.

---

I hope I understood you correctly…? If I missed something, could you please clarify?

[dthreatt]

I am talking about BRANCHES not enviroments. With Netlify I can make 2 triggers. One for each branch staging and production. With Vercel it wont do it. It does automatically push on on code change. We are talking about triggering on content change manually from DatoCMS.

ISR is only available for certain frameworks. Astro is not one of them.

Manual trigger is sloppy because I cannot do the trigger responses from Vercel. So its just a blind trigger.

[roger]

@dthreatt

I am talking about BRANCHES not enviroments.

Sorry, I’m still not sure if I’m understanding you 100%. I THINK this is what you mean:

• On record changes in your DatoCMS Primary environment, you want Vercel to rebuild your main branch
• On record changes in your DatoCMS Staging environment, you want Vercel to rebuild another branch, like staging?

If so, I think what you have to do:

1. Create a custom webhook in DatoCMS, under https://your-project.admin.datocms.com/project_settings/webhooks/new:

There you can specify specific criteria, like only triggering it on record changes, and only if the environment is staging. You would send the webhook to a Vercel build hook that’s set to the staging branch there.

2. Make another deploy hook in Vercel, but this time for the primary environment against your main branch.

3. Remove the old Vercel build trigger that we provided (because your webhooks are doing it now, with your own conditionals).

I don’t believe there is a way to configure our Vercel build trigger to that granularity, but you should be able to do the same with custom webhooks, and that way they will be automatic too (vs the manually triggered build hooks). It’s a bit confusing, but a build trigger is just a webhook we preconfigure for you that you can manually invoke. The custom webhooks give you the full customizability, allowing you to send any sort of Vercel hook, to build whatever you want when you want it.

---

I HOPE that’s what you’re asking for…? If I still misunderstood, could you please clarify the behavior you’re looking for? Like what X should happen on Vercel, in which branch, when Y occurs in Dato?

[dthreatt]

Roger I AM NOT DOING ANYTHING WITH ENVIRONMENTS. We only run 1 environment on Dato. I am talking about BRANCH based triggers for Netlify and Vercel

Here are the netlify BUILD TRIGGERS

We just want to do the same with Vercel
Its only allowing us to do 1

We dont want to build on every publish. It causes to many builds and sometimes we hold off the build until all our changes are in then we do it manually.

We use staging BRANCH of the site for that and then maybe like once a week we publish to main/production BRANCH

If I do a manual build trigger i dont have the ability to know when the build is completed without going to Vercel. Your integration does that for Vercel and Netlify

[roger]

Sorry I misunderstood. So you want two MANUAL build triggers, each that goes to a different Vercel branch, but with a success message when it’s done?

Unfortunately, I think this is still going to involve some extra work It looks like the single-project limit is a limitation on Vercel’s side, and it won’t let us add another build trigger for the same project (as you saw).

Instead, you can make a custom build trigger (similar to a custom webhook, but manually invoked):

From https://your-project.admin.datocms.com/project_settings/build_triggers/new

When you do that, you can configure success/failures webhooks (that Vercel will send back to us once deployment succeeds or fails):

I think on the Vercel Pro+ plan levels, you can add these easily under your account, specifying the projects you’re interested in: Setting Up Webhooks

Otherwise you might have to make a custom Vercel integration to specify them: Setting Up Webhooks

Let me check with the devs to see if this is how our Vercel build trigger success callback works, or if there’s another way to monitor success that might be easier to implement.

[mat_jack1]

hey @dthreatt it looks like a bug on the integration. It should let you pick the project multiple times, instead it’s asking to log in and allow the integration again on your account. This is not intended, probably something has changed on the Vercel side. I’ll let you know as soon as possible. It’s definitely doable what you need.

[roger]

Thank you, @mat_jack1! @dthreatt I apologize again, both for misunderstanding your initial question and for not realizing it’s a bug on our side & Vercel’s. We’ll update you as soon as we have a resolution.

(In the meantime if you need a quicker solution, you can still use the workaround above with the custom build trigger + success callback. But we’ll let you know as soon as we find out what we can do.)

[dthreatt]

I tried to do it but their callback only allows a simple URL … I even tried ?status=sucess on the url and that doesnt work. The callback would need a curl which it doesnt have

[roger]

@dthreatt

I tried to do it but their callback only allows a simple URL …

@mat_jack1 Would you happen to know how it works in our integration? (How do we get Vercel to send us back a success after a build completes? I couldn’t find it in the repos, sorry)

I even tried ?status=sucess on the url and that doesnt work. The callback would need a curl which it doesnt have

Hmm, if nothing else, maybe a simple serverless function (on Vercel or Cloudflare) could rewrite it and then post it? In pseudocode:

• Vercel sends its success/failure to your serverless func
• The functions receives the Vercel webhook. If type == deployment.succeeded, it will then send a new POST to our webhook catcher with body { "status" : "success"}. (And if type == deployment.error || type == deployment.canceled, send us an error status instead)

Let me know if you need some example code and I’ll try to write an example proxy.

This is getting pretty complicated and messy though. Hopefully @mat_jack1 has a better idea about how to approach this…? Otherwise, I’ll report back here once they’re able to investigate whether we can fix/modify the first-party Vercel integration to just allow multiple instances.

Thank you for your patience through all this!

[dthreatt]

Its ok I just gave up on Vercel and went back to Netlify. Thanks you all of your help @roger

[mat_jack1]

@roger the right thing to do is to fix the integration. We are trying to understand what we should do differently to fix the integration. As soon as we are done we’ll let you know so that you can pick the integration that you prefer. Sorry for this

[dthreatt]

@mat_jack1 Ok…I do prefer vercel but for now netlify will work until you guys figure it out.

[roger]

@dthreatt

Vercel fixed the bug and you should be able to make two build triggers now!

[dthreatt]

Awesome…you guys rock!!