Get help on Discord

Adding a button to trigger a Vercel build using the deploy hook in Sanity Studio.

8 replies
Last updated: Aug 19, 2021
Hey, has anyone added a button that triggers a vercel build using the deploy hook? I couldn't find docs on how to add a custom button and function to the studio. Grateful for any info. thanks!
AI Update

Great question! Yes, adding a custom button to trigger Vercel builds is totally doable, and there's actually an official plugin that handles this for you!

The Easy Way: Use the Vercel Deploy Plugin

The sanity-plugin-vercel-deploy plugin is the recommended solution. It adds a "Deploy" tool to your Studio navbar with features like:

  • ✨ One-click deploys
  • LIVE status updates
  • Multiple deployment environments
  • Active polling
  • Vercel Teams support

Installation:

npm install sanity-plugin-vercel-deploy

Configuration:

// sanity.config.ts
import {defineConfig} from 'sanity'
import {vercelDeployTool} from 'sanity-plugin-vercel-deploy'

export default defineConfig({
  // ...
  plugins: [
    vercelDeployTool(),
  ],
})

Once installed, click "Add Project" in the Deploy tool and configure:

  • Deploy Hook URL: Get this from Vercel Project Settings → Git → Deploy Hooks
  • Vercel Project Name: Found in your Vercel project settings
  • Vercel Token: Create one in your Vercel Account Settings → Tokens
  • Vercel Team Slug (if applicable): The team URL slug from vercel.com/your-team

Building Your Own Custom Button

If you want to create a custom implementation, you have a few options:

1. Document Actions - Add buttons to individual document views using the Document Actions API. This is useful if you want to trigger builds when specific documents are published.

2. Custom Studio Tool - Create a custom tool that appears in the Studio navbar, similar to how the Vercel plugin works. You can build this using the Structure Builder.

3. Sanity Functions - For automation, you could use Sanity Functions to automatically trigger Vercel builds when content changes, without needing a manual button at all. This is the modern, serverless approach that runs natively within Sanity.

However, for triggering Vercel builds on-demand, the plugin approach is much cleaner and gives you the status monitoring UI out of the box! The plugin is actively maintained and handles all the edge cases for you.

Or something more custom:
import * as React from "react";
import Button from "part:@sanity/components/buttons/default";

const labels = {
  LOADING: "Loading...",
  READY: "Publish all",
  DEPLOYING: "Deploying...",
};

/**
 * TODO: Build an integration with the API to get the actual deployment status
 */
export const PublishAllButton = React.forwardRef(() => {
  const [status, setStatus] = React.useState<Status>("LOADING");

  const deployAll = React.useCallback(async () => {
    const res = await fetch(process.env.SANITY_STUDIO_VERCEL_DEPLOY_HOOK, {
      method: "GET",
    });
    const json = await res.json();
    if (json.job.state === "PENDING") {
      setStatus("DEPLOYING");
      setTimeout(() => {
        setStatus("READY");
      }, 90000);
    }
  }, []);

  React.useEffect(() => {
    setStatus("READY");
  }, []);

  return (
    <Button disabled={status !== "READY"} onClick={() => deployAll()}>
      {labels[status] || "Publish all"}
    </Button>
  );
});

export default PublishAllButton;

type Status = "LOADING" | "READY" | "DEPLOYING";

import { IoIosWarning } from "react-icons/io";
import PublishAllButton from "../../src/components/PublishAllButton";

export default {
  name: 'dangerZone',
  title: 'Danger Zone',
  type: 'document',
  icon: IoIosWarning,
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
      hidden: true,
      initialValue: 'Danger Zone'
    },
    {
      name: 'publishAll',
      title: 'Publish all documents',
      type: 'string',
      inputComponent: PublishAllButton
    },
  ]
}
The gotcha is that you cannot get the status of the deployment. Therefore it just has a timer a little longer than the average deployment.
Also note that environment variable that you want the studio to be able to access need to be prefixed with 
SANITY_STUDIO_
Use the plugin, I just installed it to have a play around with it’s great!
Thanks for the replies! I'll install the plugin and have a look, originally I was looking for something more simple than the plugin, this is for the end-users, so the less info the better 🙂
Plugin is perfect. Thanks!
Author of the Vercel Deploy plugin here, thanks for the kind words
user X
and
user V
! 🤘

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?