Updating your Prismic Blog on Vercel using webhooks

Introduction

This short article will get you up and running with Prismic webhooks to trigger new deployments for your application on Vercel. This article presumes you already have a Prismic enviroment setup and deployed to Vercel, if not there is a boiler plate here to get you up and running: https://vercel.com/templates/next.js/prismic-blog

We will be navigating between Vercel and Prismic a few times, so I suggest to have these both open in seperate tabs to save the back and forth.

Vercel

To start, we need to create a Deploy Hook within Vercel. You can do this by navigating to the project you are setting up, clicking Settings and then clicking on Git, then scroll down until you come to the heading Deploy Hooks.

From here, we can provide the name of the deploy hook, I've named mine Prismic and the branch we wish to target (this will normally be main or master). Once you've added those values, go ahead and click Create Hook.

Once saved, you will be presented with a url. Copy this and navigate across to your Prismic project.

Prismic

Now that we have our Deploy Hook from Vercel, we can add our Webhook on Prismic. To do this, navigate to settings by clicking on the cog icon in the bottom left hand of the dashboard and then click Webhooks under the configuration section.

From the Webhooks page, click on Create a webhook and fill out the following fields:

1. Name
   This can be anything, but I've named mine Vercel to match the naming previously used on the Vercel deploy hook.
2. URL
   This is the url we copied from Vercel after creating our deploy hook.

The rest of the fields can be ignored for this.

With all the fields populated (well, just the two needed) we can now select each of the triggers we'd like to cause a new deployment. The triggers we can select are within the following categories: Documents, Releases and Tags. To find out more about these in detail, you can follow the documentation from Prismic here.

Once you've selected the triggers you wish to use, go ahead and click Add this webhook.

With this saved, we can now test our new webhook by clicking the trigger it button on the webhook page. There is no UI update when clicking on this button, so resist hitting it multiple times and awaiting any form of confirmation like I did. If you do find the act of something occurring after clicking a button confirming, feel free to open up dev tools and click on the network tab before pressing the button to see a POST request fire.

Head on back over to Vercel and navigate to Deployments to make sure that everything we've connected up is working as expected. If successful, you should see a new row within the deployments table with trigger source labeled Deploy Hook as per the image below.

Caching.

When first setting up the webhook to trigger new deployments on Vercel, I could see the latest builds under the deployments page, however when diving into each of these I could see the build logs were not displaying my latest changes from Prismic.

You can see which content is being generated just under this line:

Collecting build traces...

After some digging I could see that each of the new deployments were using build cache, again you can see this within each of the deployments and this command will be at the top of the list.

As we want the latest published content from Prismic, we can go ahead and disable the build cache by adding VERCEL_FORCE_NO_BUILD_CACHE to our environment variables within Vercel, and this will require the value 1. More details on how to add envs to Vercel can be found within their detailed docs here.