๐Ÿ‘‹ Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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!
Aug 17, 2021, 7:10 AM
Aug 17, 2021, 7:24 AM
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
    },
  ]
}
Aug 17, 2021, 7:41 AM
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.
Aug 17, 2021, 7:42 AM
Also note that environment variable that you want the studio to be able to access need to be prefixed with
SANITY_STUDIO_
Aug 17, 2021, 7:46 AM
Use the plugin, I just installed it to have a play around with itโ€™s great!
Aug 17, 2021, 8:53 AM
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 ๐Ÿ™‚
Aug 17, 2021, 1:12 PM
Plugin is perfect. Thanks!
Aug 17, 2021, 1:30 PM
Author of the Vercel Deploy plugin here, thanks for the kind words
user X
and
user V
! ๐Ÿค˜
Aug 19, 2021, 3:53 PM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?