ndimatteo / sanity-plugin-vercel-deploy

Custom plugin to trigger webhooks from your Sanity Studio.

Vercel Deployment for Sanity

Trigger Vercel Deploy Hooks from your Sanity V3 Studio.
✨ LIVE status updates ✨ multiple deployments ✨ active polling ✨ Vercel Teams support ✨

🔌 Install

yarn add sanity-plugin-vercel-deploy
# or npm
npm i sanity-plugin-vercel-deploy

Warning
This is a Sanity Studio V3 plugin. For the V2 version, please refer to the studio-v2 branch.

⚙️ Configure

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

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

🚀 Your first Vercel Deployment

Once installed, you should see a new "Deploy" tool in your Sanity Studio navbar.

To create a new deployment, click the "Add Project" button. Next, you'll be prompted to add the following:

Title

A name for your deployment to help you organize your deployments.
Typically, this should be the environment you are deploying to, like Production or Staging

Vercel Project Name

This is the slugified project name listed in your Vercel account.
You can find this in your Vercel Project under Settings → General → "Project Name"

Vercel Team Name (optional)

If your project is part of a Vercel Team you must provide this value.
You can find this in your Vercel Team, under Settings → General → "Team Name"

Deploy Hook URL

This is the Vercel Deploy hook you want to trigger builds with.
You can find this in your Vercel Project under Settings → Git → "Deploy Hooks"

Vercel Token

This is a token from your Vercel Account (not project).
You can find this from your Vercel Account dropdown under Settings → "Tokens"

🧪 Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.

🤝 License

MIT

nickdimatteo.com  ·  Github @ndimatteo  ·  Instagram @ndimatteo

sanity-plugin-vercel-deploy's Issues

Build error when running Sanity

/node_modules/sanity-plugin-vercel-deploy/dist/deploy-status.css
Module build failed: ModuleBuildError: Module build failed: Error: Cannot find module 'caniuse-lite/data/features/css-unicode-bidi.js'

Sanity Studio v3 compatbility

It would be nice to see this plugin working for Sanity Studio v3.

Is the upgrade to Studio v3 planned?

Support projects inside vercel teams

Here is one more thing:

Retrieving the deploy status does not work if the project is inside a vercel team. Basically the api request to /projects 404s. As per vercel docs one needs to add ?teamId= to the request.

I tried the hacky way and put the whole thing my-project?teamId=my-team-id-423423 into the project name field of this plugin, but that only made the first request working. ;)

For now maybe it would be enough to allow adding a teamId as a setting. Even though that is not user friendly at all since that id is not obvious and needs to be retrieved via api as well.

THANK YOU

Your work is noticed and appreciated! thank you!

Configuration in code rather than with UI

It would be great if it would be possible to provide settings with configuration file rather than in UI. For example, I'm working with monorepo with integrated Sanity studio in several websites that use same Sanity project Id, and I want to have a separate deploy button in each Studio, but right now if I add deploy button in one studio, it is displayed in all of them.

Suggestion: Make "Remove" less prominent in the UI

Remove immediately deletes the item from the list and as people can be clumsy, this might lead to accidental clicks. Simplest solution might be to instead of having it beside the Deploy button, is to place it somewhere else as a small text, out of the way.

A deployment does not refresh my content

Hey

I've just recently started using this package. The package does indeed trigger a new build on vercel but for some reason my newly published content isn't showing up on the new deployment.

I just wanted to make sure that I haven't missed a step

1. I've published new content in deployed sanity studio

2. Create a deployment and deploy it

3. Deployment completes but the content on the deployment doesn't

Cheers

Mismatch Description for the `Add Project` Dialogue

Proposal

The description on the popup dialogue for the Vercel Team Name field should be updated accordingly so that it does not say Required for projects under a Vercel Team: Settings → General → "Team Name"

Problem

Copying the team name when the name contains multiple words. Example: My organization name is Zenith Research on Vercel and on the Vercel Team: Settings → General → "Team Name" it is shown as ZenithResearch but putting this value on the field brings up an error of Team not found.

Solution

Instead of Settings → General → "Team Name" where the value was ZenithResearch using zenith-research found on the team URL fixed the issue. So adding a line or a detail indicating the URL instead of the team name would be a better option.

If approved I would raise a PR for changing the following file:

src/deploy-item.tsx

with the updated description on:

description={"Required for projects under a Vercel Team: Settings → General → "Team Name"}

No Team found! Make sure the token you provided is valid and that the team’s slug correspond to the one you see in Vercel

No Team found!
Make sure the token you provided is valid and that the team’s slug correspond to the one you see in Vercel

Getting this error (Sanity badge, bottom right corner) and can't get to create my first deploy.

Maybe related to https://vercel.com/changelog/ui-hooks-for-integrations-will-be-deprecated ?

Scope Polling and initial deploy STATE to specific vercel project ID

Right now, we're using the List Deployments API endpoint, which returns all deployments under the associated account.

We need to somehow ONLY get the latest deployment for a given project, using the Get Deployment API endpoint.

You need the project id to do this. So, I'm thinking we need to get the project ID when the initial webhook is created, so we can use that for polling. Unfortunately I'm not sure how to get that info, when all we have to go off of is a webhook URL and/or Vercel Token?

The only time we actually know the associated deployment ID is when you click "deploy", the webhook returns a payload with the deployment ID. This works for actual deployment, but not for inactive deployments, or when the webhook is initially added.

plugin for DigitalOcean

Hi Nick

I've been using a hacked-together solution for DigitalOcean deployments for several years now, and finally decided to make a proper plugin.

Yours seemed to do everything I need, so I decided to clone it and modify for DO. Results are here: https://github.com/EricWVGG/sanity-plugin-digitalocean-deploy. It works great!

Do you mind if I release this project on NPM? If so, how can I best credit you and your efforts?

Many thanks,
Eric J

Delete deployment button not showing

When running the sanity cms in dev mode locally I am not seeing the delete deployment button.

It was my impression it should show in dev even though the deployment is set to disable delete in production.

Since I have rotated the token, and you cannot update the token these deployments are now stuck for me, cannot be deleted or updated to the new token.

Getting issue with Spacetime

I can not display the panel anymore due to some tz issues.

Is there a setting in sanity config that i can change to avoid this issue in the meantime ?

Project not found error

I created a project on Sanity Deploy by following your readme description.
It deploys if I click on the Deploy button, but not deploy automatically and it shows an error [Project not found].
Here is the screenshot of the error.

Disabling deletion in production also disables it in development environment

Activating the option "Disable the 'Delete' action for this item in production" prevents me from deleting the webhook item in the development environment too.

I encountered this issue after transferring the project to a new team on Vercel. I'm unable to customize the entire webhook element due to a validation error indicating that the token is not configured with the new project environment.

How should I proceed to delete the element?

@sanity/dashboard depency missing

Hej, thank you for the project - it is basically exactly what I was looking for!

When first installing on a fresh sanity install you'll get:

sanity start
✔ Checking configuration files...
⠧ Compiling...webpack built d029d1460e2bc3cfd470 in 21713ms
✔ Compiling...
Failed to compile.

Error in ../node_modules/@sanity/css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]&importLoaders=1&sourceMap!../node_modules/postcss-loader/lib??ref--1-oneOf-1-2!../node_modules/sanity-plugin-vercel-deploy/dist/vercel-deploy.css
Module not found: Error: Part "part:@sanity/dashboard/widget-styles" not implemented by any plugins

Just doing sanity install @sanity/dashboard fixes the problem.

sanity versions

@sanity/cli             2.0.5 (latest: 2.1.0)
@sanity/base            2.1.2 (up to date)
@sanity/cli             2.1.0 (up to date)
@sanity/components      2.1.0 (up to date)
@sanity/core            2.1.2 (up to date)
@sanity/dashboard       2.1.0 (up to date) <-- well afterwards :D
@sanity/default-layout  2.1.2 (up to date)
@sanity/default-login   2.1.0 (up to date)
@sanity/desk-tool       2.1.2 (up to date)
@sanity/vision          2.0.9 (latest: 2.1.0)

I reckon one could add @sanity/dashboard as a plugin of this plugin + maybe a peer dep.

Cheers!

Deploy works with old cache

When I click on the Deploy button on the Sanity Deploy tab, the deploy launch with the old cache.
If I redeploy it without the existing Build Cache(by unchecking the checkbox), it works well, but it doesn't work if I click on the Deploy button on Sanity.
Is there a way to deploy without the old cache?

Protect Delete Action

Is it possible to restrict the ability to delete a project? I need my clients to be able to deploy on demand, but if they delete the project unintentionally, I have to set it all up for them again.

"Error" badge appears, and no way of telling when a deployment completed/failed/in progress

The "error" badge never seems to go away after setting up projects with the correct fields.

After hitting deploy, a loader icon appears but goes back to "Error" after a couple of seconds.
Impossible to tell if the deployments have completed/failed or are still in progress.

Question: Deployments/Publishing and should I enable Sanity `liveEdit` on all documents?

This might be the wrong place for this but I would like to get your thoughts.

So I am setting up a Sanity-Vercel deployment for the first time and trying to work out the easiest way to interact with it.

Sanity obviously has the concept of draft and published documents. When we do a deploy NextJS in the getStaticProps will read the Published documents from Sanity API.

We can then create a webhook with Sanity to trigger the deploy on a publish. However, I feel like the current flow of the site I've built is do all your edits as draft and use Preview to see how the site is going to look. Then once happy publish your documents. The problem is this will kick off multiple builds.

Option 1: Don't use a Sanity webhook and use a plugin like this to do manually deploy once documents have been edited. However there is then a step of having to publish all the documents which seems pointless, so I feel like it would make more sense to disable the publish with liveEdit: true

Option 2: Create a Sanity webhook and point it to a function that checks if the current Vercel project is deploying and if it is cancel and start a fresh one. This means if you were to publish 5 documents you wouldn't get a queue of 5 builds.

Do you currently have to publish everything before deploying? Is there any benefit of publishing?

All deployments are stuck

I've created a new production trigger, and unfortunately it created a duplicate. Also I canceled one of the deployments. Ever since it's stuck in an endless loop.
Is there a way to remove the triggers without the UI?

I'm using version "sanity-plugin-vercel-deploy": "2.1.6" because the project is still running on studio v2.

Appreciate any help!

Canceled deployment are stuck

Hello there,
When a deployment is canceled on Vercel, the status is stuck forever in the dashboard.

> ฉันสร้างโปรเจ็กต์บน Sanity Deploy โดยทำตามคำอธิบาย Readme ของคุณ มันปรับใช้ถ้าฉันคลิกที่ปุ่มปรับใช้ แต่ไม่ปรับใช้โดยอัตโนมัติและแสดงข้อผิดพลาด [ไม่พบโครงการ] นี่คือภาพหน้าจอของข้อผิดพลาด 

          > ฉันสร้างโปรเจ็กต์บน Sanity Deploy โดยทำตามคำอธิบาย Readme ของคุณ มันปรับใช้ถ้าฉันคลิกที่ปุ่มปรับใช้ แต่ไม่ปรับใช้โดยอัตโนมัติและแสดงข้อผิดพลาด [ไม่พบโครงการ] นี่คือภาพหน้าจอของข้อผิดพลาด ![ภาพ](https://user-images.githubusercontent.com/75736745/242378479-23e1dea7-0187-4f5b-ad27-cb91a8e709c8.png)

Originally posted by @ailadas in #42 (comment)

Deploy Logs Feature

Hi there, I've been doing a little work with a similar plugin (https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel) and was wondering if adding a dashboard widget and/or a deployment logs table to this plugin would be appreciated? If so, I'd love to submit a pull request.

The dashboard plugin has an issue with sensitive data exposure (see sanity-io/sanity-plugin-dashboard-widget-vercel#2), so I'd love to take advantage of your infrastructure for storing those secrets in Sanity. Please just let me know if you'd accept a PR and if you have any contribution guidelines. Thanks!

'Deploy' tab not showing in production

Thank you for this package. I installed it, and it works fine locally – I can see the 'deploy' tab on localhost:3000/studio. However, it doesn't show up when I access the studio on Vercel (myproject.com/studio).

I was wondering whether it might be a setting I need to enable somewhere, but wasn't able to see anything obvious in the docs. Any ideas where I'm going wrong?

This is my package.json:

{
  "name": "next-sanity-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "ts": "tsc --watch --noEmit"
  },
  "dependencies": {
    "@portabletext/react": "^2.0.2",
    "@sanity/block-content-to-markdown": "^0.0.5",
    "@sanity/code-input": "^4.1.1",
    "@sanity/image-url": "^1.0.2",
    "@sanity/vision": "^3.10.1",
    "@types/node": "18.15.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3",
    "next": "13.2.3",
    "next-sanity": "^4.3.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sanity": "^3.10.1",
    "sanity-plugin-vercel-deploy": "^3.3.3",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "prettier": "^2.8.8",
    "sanity-codegen": "^0.9.8",
    "tailwindcss": "^3.2.7"
  }
}

And this is my sanity.config.ts file:

import { visionTool } from "@sanity/vision";
import { defineConfig } from "sanity";
import { deskTool } from "sanity/desk";
import { codeInput } from "@sanity/code-input";
import { apiVersion, dataset, projectId } from "./sanity/env";
import schemas from "./sanity/schemas";
import { vercelDeployTool } from 'sanity-plugin-vercel-deploy'

export default defineConfig({
  basePath: "/studio",
  projectId,
  dataset,
  schema: {
    types: [...schemas],
  },
  plugins: [
    deskTool(),
    visionTool({ defaultApiVersion: apiVersion }),
    codeInput(),
    vercelDeployTool(),
  ],
});

The tab shows on localhost:

But not on production:

Thank you for your help!

Deploys from Sanity not clearing cache

Hey! First off, thanks so much for the plugin, I use it on pretty much all of my projects and it's been great. Since last week i've noticed that deploys from within the studio don't seem to clear the build cache and the new content isn't actually being loaded into the site once deployed. Any idea what may be causing this? If I build the same deploy from within Vercel it works fine.

Cheers!

Shows incorrect deployment status 🔴

There seems to be some issues with the deployment status in the Sanity dashboard.

What happens

The build is initiated from Sanity.

The build process is properly starting on Vercel.

The build successfully finishes on Vercel.

Dashboard shows an error status.

console.log

I'm using Safari on macOS.

Status is not accurately reported when using buildCache=false param

When using the buildCache param, the status will stay in the Initiated state forever.