Comments for deployments on PRs when deploying with Vercel CLI

[IGassmann]

Vercel allows users to use GitHub Actions to build and deploy thanks to the Vercel CLI. GitHub Actions are a great solution for when you have complex deployment pipelines, and you want to clearly display the steps that are performed along the way on GitHub.

However, if you decide to use GitHub Actions for deploying to Vercel, the Vercel bot won't comment on open PRs the link to the preview deployment with information about the number of comments on the Preview Deployment:

[amyegan]

Great idea! I think the team is already working on some features that could make this possible. I'll make sure it's on the requested features list 😄

[defunctzombie]

Great to hear!

Is there a workaround the team would recommend to surface the deployment URL to the PR? Right now the only place I can find the URL is by clicking into the action and searching through the action logs.

[frdwhite24]

Great to hear the team is working on this, are there any updates on this? @defunctzombie @IGassmann did either of you come up with a solution?

[defunctzombie]

@frdwhite24 Here's a snipped of the workflow we use to deploy to vercel from github actions and display preview URLs in the github PR using the "environments" feature on github:

Note: We have disabled the vercel github integration and do all of our builds via github actions. It was important to us to do vercel deployments after tests for production deployments.

jobs:
  Deploy:
    runs-on: ubuntu-latest

    environment:
      name: preview
      url: ${{ steps.seturl.outputs.url }}

    steps:
      - uses: actions/checkout@v3.5.3

      - uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        shell: bash
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} | tee deploy.log

      - id: seturl
        name: Set preview url
        run: echo "url=$(tail -1 deploy.log)">> $GITHUB_OUTPUT

      - run: echo "${{ steps.seturl.outputs.url }}"

We don't use the comments feature of vercel so don't need those comments on our PRs.

[frdwhite24]

Thanks so much both @defunctzombie and @amyegan, this looks like it's exactly what we'd need and agreed @defunctzombie re deployments after tests for production. I'll implement something when i next get a chance and revert back here 😊

[frdwhite24]

@amyegan do you have a personal access token for Vercel CLI hooked into the Github Action for this?

I'm just wondering because previously we have had Preview URLs being in the format of <app-name>-git-<branch-name>-netpurpose.vercel.app but now they're all in the format <app-name>-frdwhite24-netpurpose.vercel.app so overlap across branches. Commit specific URLs are unique as they use the git SHA.

Your solution: does it comment the commit specific URL or the branch URL? If commit specific, does that mean you get N commits * X deploys = number of comments? i.e. 3 deploys on a mono repo, 10 commits would be 30 comments on the PR 🤪

Would be fantastic to either edit an existing comment, or sustain the unique deployment URL per branch as per with the Vercel Integration! What are your thoughts?

[paul-vd]

You could check if the comment exists and then update it? for example:

name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ vars.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ vars.VERCEL_PROJECT_ID }}
on:
  push:
    branches-ignore:
      - main
jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    environment: preview
    outputs:
      deploymentUrl: ${{ steps.deploy.outputs.deploymentUrl }}
    steps:
      - name: Checkout the Codebase
        uses: actions/checkout@v3

      - name: Environment Setup
        uses: ./.github/actions/environment-setup

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: |
          export NODE_OPTIONS="--max-old-space-size=7168"
          vercel build --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        id: deploy
        run: |
          vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > deploy.log
          URL=$(cat deploy.log | grep -o 'https://[^ ]*.vercel.app' | head -n1)
          echo "deploymentUrl=$URL" >> $GITHUB_OUTPUT

  Add-Comment:
    runs-on: ubuntu-latest
    needs: Deploy-Preview
    permissions:
      issues: write
      pull-requests: write
    steps:
      - name: Comment URL to PR
        uses: actions/github-script@v6
        id: comment-deployment-url-script
        env:
          DEPLOYMENT_URL: ${{ needs.Deploy-Preview.outputs.deploymentUrl }}
        with:
          script: |
            // Get pull requests that are open for current ref.
            const pullRequests = await github.rest.pulls.list({
                owner: context.repo.owner,
                repo: context.repo.repo,
                state: 'open',
                head: `${context.repo.owner}:${context.ref.replace('refs/heads/', '')}`
            })

            // Set issue number for following calls from context (if on pull request event) or from above variable.
            const issueNumber = context.issue.number || pullRequests.data[0].number

            // Retrieve existing bot comments for the PR
            const {data: comments} = await github.rest.issues.listComments({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: issueNumber,
            })
            const botComment = comments.find(comment => {
                return comment.user.type === 'Bot' && comment.body.includes('Deployed at')
            })

            const output = "Deployed at " + process.env.DEPLOYMENT_URL

            // If we have a comment, update it, otherwise create a new one
            if (botComment) {
                github.rest.issues.updateComment({
                    owner: context.repo.owner,
                    repo: context.repo.repo,
                    comment_id: botComment.id,
                    body: output
                })
            } else {
                github.rest.issues.createComment({
                    issue_number: issueNumber,
                    owner: context.repo.owner,
                    repo: context.repo.repo,
                    body: output
                })
            }

[andreasvirkus]

@paul-vd did you have this workflow running or is this pseudo-ish code? The process.env.DEPLOYMENT_URL doesn't get populated it seems 🤔

##[debug]Evaluating: needs.Deploy-Preview.outputs.deploymentUrl
##[debug]Evaluating Index:
##[debug]..Evaluating Index:
##[debug]....Evaluating Index:
##[debug]......Evaluating needs:
##[debug]......=> Object
##[debug]......Evaluating String:
##[debug]......=> 'Deploy-Preview'
##[debug]....=> Object
##[debug]....Evaluating String:
##[debug]....=> 'outputs'
##[debug]..=> Object
##[debug]..Evaluating String:
##[debug]..=> 'deploymentUrl'
##[debug]=> null

[stefanpruna]

This feature is something that my team and I are really interested in. @amyegan, could you provide any details about it's place on the roadmap? We are very interested in the comments section as is it something we integrated in our workflow.
I could not find a workaround to pull comment information.

[frans-slabbekoorn]

We are currently facing this problem as well.

Any workarounds or updates on this topic?