|
| 1 | +--- |
| 2 | +name: use-vercel-action |
| 3 | +description: Wire `amondnet/vercel-action` into a GitHub Actions workflow to deploy Vercel projects from CI. Use when the user asks to deploy to Vercel from GitHub Actions, add Vercel preview deploys, post a Vercel preview URL on a PR, configure prebuilt Vercel deployments, set up alias domains for previews, create a GitHub Deployment for Vercel, or migrate off Vercel's native GitHub integration. Covers required tokens/IDs, the CLI vs experimental-API modes, prebuilt flows, alias placeholders, deprecated `zeit-*`/`now-*` aliases, and the action's outputs (`preview-url`, `preview-name`, `deployment-id`). |
| 4 | +--- |
| 5 | + |
| 6 | +# use-vercel-action |
| 7 | + |
| 8 | +This skill teaches an agent how to consume `amondnet/vercel-action` correctly. Inputs and outputs documented here come from `action.yml` in this repo — when in doubt, open `action.yml` for the full surface. |
| 9 | + |
| 10 | +## When to use |
| 11 | + |
| 12 | +- Adding `amondnet/vercel-action` to a workflow for the first time. |
| 13 | +- Fixing a workflow that already uses the action (input names, mutual exclusions, missing prerequisites). |
| 14 | +- Choosing between CLI mode (default), experimental API mode, and the two prebuilt flows. |
| 15 | +- Migrating from Vercel's native GitHub integration to action-driven deploys. |
| 16 | + |
| 17 | +## When NOT to use |
| 18 | + |
| 19 | +- The user just wants the Vercel CLI locally (no GitHub Actions involved) — refer them to the [official Vercel CLI docs](https://vercel.com/docs/cli) instead. |
| 20 | +- The user is happy with Vercel's native GitHub integration and isn't asking for action-based deploys. |
| 21 | + |
| 22 | +## Mandatory prerequisites |
| 23 | + |
| 24 | +Consumers consistently miss these. Verify each before writing the workflow: |
| 25 | + |
| 26 | +1. **Disable Vercel's native auto-deploys** in the project repo, otherwise both Vercel and the action will deploy and you'll get duplicate previews. Add to `vercel.json` (or `vercel.ts`): |
| 27 | + ```json |
| 28 | + { "git": { "deploymentEnabled": false } } |
| 29 | + ``` |
| 30 | + Legacy projects may instead use the older `{ "github": { "enabled": false } }` — both are accepted. |
| 31 | + |
| 32 | +2. **Link the project locally and capture the IDs.** Run `vercel link` once on a developer machine; this writes `.vercel/project.json` with `projectId` and `orgId`. Store those values as GitHub repository secrets: |
| 33 | + - `VERCEL_TOKEN` — created at https://vercel.com/account/tokens |
| 34 | + - `VERCEL_ORG_ID` — from `.vercel/project.json` |
| 35 | + - `VERCEL_PROJECT_ID` — from `.vercel/project.json` |
| 36 | + |
| 37 | + Do not commit raw IDs into workflow files; reference them via `${{ secrets.* }}`. |
| 38 | + |
| 39 | +3. **GitHub Deployments need explicit permission.** If you set `github-deployment: true`, the workflow job must declare `permissions: deployments: write` (and usually `contents: read`). Without it the deployment write call fails. |
| 40 | + |
| 41 | +4. **Action runtime is Node 24.** No consumer-side Node setup is needed for the action itself — the runner provides it. |
| 42 | + |
| 43 | +## Quick start: preview deploy on every PR |
| 44 | + |
| 45 | +```yaml |
| 46 | +name: Preview Deploy |
| 47 | +on: |
| 48 | + pull_request: |
| 49 | + branches: [main] |
| 50 | + |
| 51 | +jobs: |
| 52 | + deploy: |
| 53 | + runs-on: ubuntu-latest |
| 54 | + steps: |
| 55 | + - uses: actions/checkout@v4 |
| 56 | + - uses: amondnet/vercel-action@v42 |
| 57 | + with: |
| 58 | + vercel-token: ${{ secrets.VERCEL_TOKEN }} |
| 59 | + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} |
| 60 | + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} |
| 61 | + github-token: ${{ secrets.GITHUB_TOKEN }} |
| 62 | +``` |
| 63 | +
|
| 64 | +`github-token` is what enables the action to comment the preview URL on the PR. Omit it (or set `github-comment: false`) if you don't want the comment. |
| 65 | + |
| 66 | +## Common patterns |
| 67 | + |
| 68 | +### Production deploy on push to main |
| 69 | + |
| 70 | +```yaml |
| 71 | +on: |
| 72 | + push: |
| 73 | + branches: [main] |
| 74 | +
|
| 75 | +jobs: |
| 76 | + deploy: |
| 77 | + runs-on: ubuntu-latest |
| 78 | + steps: |
| 79 | + - uses: actions/checkout@v4 |
| 80 | + - uses: amondnet/vercel-action@v42 |
| 81 | + with: |
| 82 | + vercel-token: ${{ secrets.VERCEL_TOKEN }} |
| 83 | + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} |
| 84 | + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} |
| 85 | + vercel-args: --prod |
| 86 | +``` |
| 87 | + |
| 88 | +### Prebuilt — Method 1: build outside the action |
| 89 | + |
| 90 | +Build with the Vercel CLI in a prior step, then deploy the prebuilt output. Best when you need to share the build artifact with other steps (tests, smoke checks). |
| 91 | + |
| 92 | +```yaml |
| 93 | +- run: npm install --global vercel@latest |
| 94 | +- run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} |
| 95 | + env: |
| 96 | + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} |
| 97 | + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} |
| 98 | +- run: vercel build --token=${{ secrets.VERCEL_TOKEN }} |
| 99 | + env: |
| 100 | + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} |
| 101 | + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} |
| 102 | +- uses: amondnet/vercel-action@v42 |
| 103 | + with: |
| 104 | + vercel-token: ${{ secrets.VERCEL_TOKEN }} |
| 105 | + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} |
| 106 | + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} |
| 107 | + prebuilt: true |
| 108 | +``` |
| 109 | + |
| 110 | +The `npm install --global vercel@latest` step is required on a fresh runner — the Vercel CLI is not preinstalled on GitHub-hosted runners. |
| 111 | + |
| 112 | +### Prebuilt — Method 2: let the action build |
| 113 | + |
| 114 | +`vercel-build: true` runs `vercel pull` + `vercel build` inside the action and then deploys the prebuilt output. Simpler — one step total — but you can't reuse the build artifact elsewhere. |
| 115 | + |
| 116 | +```yaml |
| 117 | +- uses: amondnet/vercel-action@v42 |
| 118 | + with: |
| 119 | + vercel-token: ${{ secrets.VERCEL_TOKEN }} |
| 120 | + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} |
| 121 | + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} |
| 122 | + vercel-build: true |
| 123 | +``` |
| 124 | + |
| 125 | +### Alias domains with placeholders |
| 126 | + |
| 127 | +`alias-domains` accepts one domain per line and substitutes `{{PR_NUMBER}}` and `{{BRANCH}}`. The domains must already exist on the Vercel project. |
| 128 | + |
| 129 | +```yaml |
| 130 | +- uses: amondnet/vercel-action@v42 |
| 131 | + with: |
| 132 | + vercel-token: ${{ secrets.VERCEL_TOKEN }} |
| 133 | + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} |
| 134 | + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} |
| 135 | + alias-domains: | |
| 136 | + pr-{{PR_NUMBER}}.preview.example.com |
| 137 | + {{BRANCH}}.preview.example.com |
| 138 | +``` |
| 139 | + |
| 140 | +When alias domains are present the `preview-url` output is the first alias rather than the raw deployment URL. |
| 141 | + |
| 142 | +### GitHub Deployments |
| 143 | + |
| 144 | +```yaml |
| 145 | +permissions: |
| 146 | + contents: read |
| 147 | + deployments: write |
| 148 | +
|
| 149 | +jobs: |
| 150 | + deploy: |
| 151 | + runs-on: ubuntu-latest |
| 152 | + steps: |
| 153 | + - uses: actions/checkout@v4 |
| 154 | + - uses: amondnet/vercel-action@v42 |
| 155 | + id: vercel |
| 156 | + with: |
| 157 | + vercel-token: ${{ secrets.VERCEL_TOKEN }} |
| 158 | + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} |
| 159 | + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} |
| 160 | + github-token: ${{ secrets.GITHUB_TOKEN }} |
| 161 | + github-deployment: true |
| 162 | + # Optional override; otherwise auto-derived from vercel-args. |
| 163 | + # github-deployment-environment: staging |
| 164 | + - run: echo "Deployment id ${{ steps.vercel.outputs.deployment-id }}" |
| 165 | +``` |
| 166 | + |
| 167 | +Deployment lifecycle: created `in_progress` before deploy, then transitioned to `success` (with the preview/alias URL as the environment URL) or `failure`. Previous deployments to the same environment are auto-deactivated. |
| 168 | + |
| 169 | +## Input reference (essentials) |
| 170 | + |
| 171 | +| Input | Required | Notes | |
| 172 | +|---|---|---| |
| 173 | +| `vercel-token` | yes | Vercel personal token. | |
| 174 | +| `vercel-org-id` | yes | Required for Vercel CLI 17+. Works for both CLI and API modes — prefer over `scope`. | |
| 175 | +| `vercel-project-id` | yes | Required for Vercel CLI 17+. | |
| 176 | +| `vercel-args` | no | Ad-hoc CLI flags (e.g. `--prod`, `--force`). **Mutually exclusive with `experimental-api` and `vercel-build`**. | |
| 177 | +| `working-directory` | no | Run the deploy from a subdirectory. | |
| 178 | +| `alias-domains` | no | Multi-line list; supports `{{PR_NUMBER}}` and `{{BRANCH}}`. | |
| 179 | +| `prebuilt` | no | Deploy a prebuilt `.vercel/output` directory. **Mutually exclusive with `vercel-build`**. | |
| 180 | +| `vercel-build` | no | Run `vercel pull` + `vercel build` inside the action. **Mutually exclusive with `prebuilt` and `vercel-args`**. | |
| 181 | +| `vercel-output-dir` | no | Override the prebuilt output path. Defaults to `{working-directory}/.vercel/output` when `prebuilt: true`. | |
| 182 | +| `github-token` | no | Needed for PR/commit comments. | |
| 183 | +| `github-comment` | no | `true` (default), `false`, or a custom comment string. | |
| 184 | +| `github-deployment` | no | `true` to create a GitHub Deployment. Requires `permissions: deployments: write`. | |
| 185 | +| `github-deployment-environment` | no | Override the auto-derived environment name. | |
| 186 | + |
| 187 | +For the long tail (`target`, `force`, `env`, `build-env`, `regions`, `archive`, `root-directory`, `auto-assign-custom-domains`, `custom-environment`, `public`, `with-cache`, `scope`, `vercel-version`, `vercel-project-name`, `experimental-api`) read `action.yml` — every input there is the source of truth. |
| 188 | + |
| 189 | +## Outputs |
| 190 | + |
| 191 | +| Output | Set when | Notes | |
| 192 | +|---|---|---| |
| 193 | +| `preview-url` | always | Raw deployment URL, or the first alias domain if `alias-domains` is set. | |
| 194 | +| `preview-name` | always | Deployment name (resolved via `vercel inspect`). | |
| 195 | +| `deployment-id` | only when `github-deployment: true` | GitHub Deployment ID — useful for follow-up status updates. | |
| 196 | + |
| 197 | +## Mutual exclusions and gotchas |
| 198 | + |
| 199 | +- `experimental-api: true` cannot be combined with `vercel-args`. The API client uses `@vercel/client`, an internal Vercel package without semver guarantees — keep CLI mode (the default) unless the user explicitly wants the typed inputs (`target`, `regions`, `env`, `build-env`, `public`, `with-cache`, `custom-environment`, `auto-assign-custom-domains`). |
| 200 | +- `prebuilt` cannot be combined with `vercel-build`. Pick exactly one prebuilt flow. |
| 201 | +- `vercel-build: true` cannot be combined with a non-empty `vercel-args`. The action throws at config-parse time with a clear error — `vercel-build` deploys the locally produced `.vercel/output` via the prebuilt path, while `vercel-args` routes through the CLI path which would ignore that output. |
| 202 | +- `scope` is CLI-mode only. Prefer `vercel-org-id` so the same workflow works in both modes. |
| 203 | +- The auto-detected GitHub Deployment environment is mode-dependent. **CLI mode**: `production` if `vercel-args` contains `--prod` or `--production`, otherwise `preview`. **Experimental API mode**: derived from `target` (`production` or `preview`). Set `github-deployment-environment` explicitly for `staging` and similar in either mode. |
| 204 | +- Deprecated input aliases (still accepted, emit deprecation warnings): `zeit-token` → `vercel-token`, `now-args` → `vercel-args`, `now-project-id` → `vercel-project-id`, `now-org-id` → `vercel-org-id`. Always rewrite to the modern names. |
| 205 | +- The action sets `VERCEL_TELEMETRY_DISABLED=1` and exports `VERCEL_ORG_ID` / `VERCEL_PROJECT_ID` from the corresponding inputs — don't redeclare them in `env:` for the action step itself. |
| 206 | + |
| 207 | +## References |
| 208 | + |
| 209 | +- `action.yml` — full input/output contract (source of truth). |
| 210 | +- `README.md` — additional examples and a longer changelog. |
| 211 | +- https://vercel.com/account/tokens — where to mint the `VERCEL_TOKEN` secret. |
0 commit comments