Adding a button to trigger a Vercel build using the deploy hook in Sanity Studio.
8 replies
Last updated: Aug 19, 2021
J
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
S
Like this plug-in?
https://www.sanity.io/plugins/vercel-deploy
https://www.sanity.io/plugins/vercel-deploy
Aug 17, 2021, 7:24 AM
G
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
G
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
G
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
G
Use the plugin, I just installed it to have a play around with itโs great!
Aug 17, 2021, 8:53 AM
J
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
J
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.