Vercel for Azure DevOps Pipelines
This extension provides Azure Devops Pipelines Tasks to integrate with Vercel using their @vercel/client npm package
Why does this exist?
Since Vercel doesn't natively support Azure Repos (why would they? - don't @ me MS), it'd be beneficial for most developers to either maintain a template within their org, or install an extension with a prebuilt step that enables deployments using @vercel/client.
When play testing this package I @ColinKrist realized that creating a org specific template approach wasn't great long term for myself and for the Azure Repos community 👍.
Yes, this extension is currently being dogfooded @ Medical Solutions - a travel nurse staffing agency. Come work for us - >here<
What is Vercel? 🔼
About Vercel: link🔗
Ever stumble upon a repo on Github and see one of these bad boys?
They're badass - and now anyone using this Task (or roll your own - source code is MIT) something like this can be done pretty easily.
What this extension / step does
Deploy to Vercel
The primary functionality that this provides is to publish lambdas, or web builds to Vercel when running the PR CI or your standard pipeline.
To greater improve the PR experience, this extension also creates and updates a single comment on your PR with the latest PR build. It also exposes the current status of the Vercel deployment from the PR comment itself *chef kiss*.
Setup & Usage
⚠ Contrary to Vercel's documentation - remove the .gitignore entries that get added when the initial Vercel cli setup is ran. (Specifically .vercel in the root of the deployment directory)
🙌 This extension can automatically use the .vercel/project.json file to determine which project to publish your Azure Repo to in Vercel without any CI configuration. Neat right?
First Time Vercel Users (generating API token)
Add this extension into your org
Configure Vercel in your repo - tutorial
Create API token in Vercel
Move onto next section to add this step into your PR yaml pipeline
Existing Vercel Project with YAML template
... nodeJS setup,
package manager install,
package caching? (I hope so it's 2022),
package rehydration / download
# Consumer of this step MUST build app prior to trying to upload it
# Vercel can recognize these intracies typically, but in case it doesn't go here to learn about to configuring the project output directory within Vercel
- task: CmdLine@2
script: "pnpm build"
- task: vercel-azdo-deploy@0
# API token - (not the projectId) this can be generated once and shared across projects
# ⚠ definitely recommend not plain texting this and using a pipeline variable ;)
# default is Build.SourceDirectory. Provided is an example for a nested repo, or for a monorepo (only supports 1 deployment from a monorepo at this time... TODO)