sanity-plugin-dashboard-widget-vercel

Vercel Dashboard Widget (for Sanity)

This is a Sanity Studio v3 plugin. For the v2 version, please refer to the v2-branch.

View your recent Vercel deployments and manually trigger builds directly from your Sanity dashboard.

Features

• Displays a list of recent builds along with deployment aliases, branch / commit messages, build age and creator
• Manually trigger deployments straight from your studio (via Vercel deploy hook URLs)
• Display (and deploy) multiple projects at once
• Customise the number of visible deployment line items
• Automatically refreshes deployments periodically, as well as immediately after a manual build is triggered
• Built with Sanity UI

Install

npm install --save sanity-plugin-dashboard-widget-vercel

or

yarn add sanity-plugin-dashboard-widget-vercel

Ensure that you have followed install and usage instructions for @sanity/dashboard.

Usage

Add it as a widget to @sanity/dashboard plugin in sanity.config.ts (or .js):

import { dashboardTool } from "@sanity/dashboard";
import { vercelWidget } from "sanity-plugin-dashboard-widget-vercel";

export default defineConfig({
  // ...
  plugins: [
     dashboardTool({
             widgets: [
               vercelWidget(),
             ],
         }
     ),
  ] 
})

Configure

The widget size can be controlled using layout.width:

dashboardTool({
        widgets: [
          vercelWidget({ layout: { width: "full" /* default and reccomended */ } }),
        ],
    }
)

Add a deployment target

Simply visit your Sanity dashboard and click the '+' icon in the top right to add a new deployment target.

You'll need to fill in the following:

Name (required)

The name assigned to a deployment target, used purely for presentational purposes in the dashboard.

Note that all deployment targets are sorted alphabetically.

Vercel Account Token (required)

This can be created in Vercel under Account > Settings > Tokens.

Vercel Project ID (required)

This can be retrieved via Vercel's API, or via the web UI on -> Settings -> General -> Scroll down to Project ID.

Vercel Team ID

Similar to project IDs, you can retrieve these via Vercel's API.

If your project is assigned to a team account, you must provide both team and project IDs.

Vercel Deploy Hook

The Vercel deploy hook URL used to trigger new builds.

Enabled a manual deployment button if provided.

These can be created in Vercel by going to Project > Settings > Git > Deploy Hooks.

Number of deploys to display (min: 1, max: 15) (required)

The number of deployments to display and fetch.

Good to know

Token security

When setting up new deployment targets, you're asked to provide your Vercel account token. It's important to know that your Vercel token provides unrestricted API access to your entire Vercel account.

Your Vercel token and all other deployment settings are stored in the vercel namespace and by design, these are not publicly accessible, even with a public dataset.

However, please note that this token is exposed to all authenticated users in your Sanity studio.

If you need to limit exposure of this token to authenticated studio users, consider using custom access control rules to limit access to documents of type vercel.deploymentTarget.

Deployment considerations

Please also keep the following in mind when manually deploying:

Triggering a Deploy Hook will not rebuild an existing deployment. Instead, it will create a new deployment using the latest source code available on the specified branch.

Currently, no build cache is used when triggering a Deploy Hook.

If you send multiple requests to deploy the same version of your project, previous deployments for the same Deploy Hook will be canceled to reduce build times.

More information on deploy hooks
Vercel rate limits

Contributing

Contributions, issues and feature requests are welcome!

License

MIT-licensed. See LICENSE.

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.

Release new version

Run "CI & Release" workflow. Make sure to select the main branch and check "Release new version".

Semantic release will only release on configured branches, so it is safe to run release on any branch.