Switching from github integration to manual CI/CD through github actions

Help
1

Hello,

I’ve been working on making a template repo for hosting an Express/Typescript server on Vercel. I originally started out with using the Github integration to automatically deploy my server, but after running into some issues found that I needed to switch to doing deployments via the Github action workflow recommended by Vercel in the documentation. This has worked for me, however because I previously set up the integration, I’m now in a state of having both the integration and the actions kicking off deployments, with only the action deployment working properly. I’m trying to figure out how to get out of this state and get my Vercel project and Github repo into a state as if I never added the integration and went with the CLI linking approach from the start, while keeping as much parity as possible with the integration capabilities.

On the Vercel side, what do I need to change? Do I just remove the “Connected Git Repository” repo link under “Settings > Git” or is there a reason I would want to keep that around? If keeping it around, what settings do I need to change to prevent all the deployment actions that happen from various repository interactions (change to “master”, branch push, pr against “master”, etc.)?

On the Github side, what do I need to change? Is there a way to view integrations for my repository and remove the Vercel one? I noticed I also have two environments configured in the repository, “Production” and “Production - (Vercel project name)”. I’m guessing the second one was added by the integration, but not sure if the first was as well or if that’s a Github default. Should I remove one or both? Is there anything else I might be unaware of the integration creating?

On parity with the integration, what should I cover? The documentation recommends setting up a production for pushes to “master” and a preview for pushes to every other branch, but I know the integration also creates previews for PR’s against “master”. I’m looking at changing the preview workflow to have optional PR only jobs that waits for the deployment, retrieves the preview URL, and comments similar to the integration, using this await action and url fetch action. Is there anything else I should cover, like somehow populating the deployments into the repositories “deployment” section? Or would that be somehow covered via the repo link on the Vercel side?

Any advice on how to effectively achieve any or all of this would be very appreciated.

Github repository: 0mn1core/express-typescript-vercel-template

2

Hi @omn1coreprocessing-g. You can use git.deploymentEnabled in a vercel.json file to disable automatic deployments without disconnecting the repo entirely.

Deciding which trigger scenarios to include is entirely up to you. But here are some ideas:

1 Like
3

Hey @amyegan, thanks for the response!

Thanks for linking the documentation on git.deploymentEnabled; I saw a couple of people using that when I was doing research but didn’t see it on the vercel.json page, so I thought it might have been removed. Completely missed that there were nested pages in the sidebar. Also good to know that github cli is available in workflows, saw a lot of people using this action but definitely seems easier to use built-in git tooling.

I deleted the production - <vercel project name> environment and put it all together. So far I have:

vercel.json

{
  "version": 2,
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api"
    }
  ],
  "git": {
    "deploymentEnabled": false
  }
}

.github/workflows/vercel-preview.yaml

name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches-ignore:
      - main
  pull_request:
    branches:
      - main
jobs:
  Deploy-Preview:
    name: Deploy to Vercel Preview Hosting
    runs-on: ubuntu-latest
    outputs:
      preview_url: ${{ steps.preview-deployment.outputs.preview_url }}
    steps:
      - name: Initial Checkout
        uses: actions/checkout@v4.1.7
      - name: Install Typescript Compile Tools
        run: npm install --global tsup typescript
      - name: Compile Typescript
        run: npm run build
      - 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 for Preview
        id: preview-deployment
        run: |
          preview_url=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}) 
          echo "preview_url=$preview_url" >> $GITHUB_OUTPUT

  Github-Deployment:
    name: Create Github Deployment for Preview Environment
    runs-on: ubuntu-latest
    needs: Deploy-Preview
    permissions:
      deployments: write
    steps:
      - name: Add Failed Preview Deployment
        id: preview-deployment-failure
        if: ${{ needs.Deploy-Preview.result == 'failure' }}
        uses: chrnorm/deployment-action@v2.0.7
        with:
          token: '${{ secrets.GITHUB_TOKEN }}'
          initial-status: 'failure'
          environment-url: ${{ needs.Deploy-Preview.outputs.preview_url }}
          environment: preview
      - name: Add Successful Preview Deployment
        id: preview-deployment-success
        if: ${{ needs.Deploy-Preview.result == 'success' }}
        uses: chrnorm/deployment-action@v2.0.7
        with:
          token: '${{ secrets.GITHUB_TOKEN }}'
          initial-status: 'success'
          environment-url: ${{ needs.Deploy-Preview.outputs.preview_url }}
          environment: preview
  
  PR-Comment:
    name: Comment on Pull Requests Based on Vercel Deployment Success
    if: ${{ github.event_name == 'pull_request' }}
    runs-on: ubuntu-latest
    needs: Deploy-Preview
    steps:
      - name: Finding Pull Request ID
        id: pr_id_finder
        uses: jwalton/gh-find-current-pr@v1.3.3
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
      - name: Add PR Comment for Vercel Deployment Failure
        if: ${{ steps.pr_id_finder.outputs.pr && needs.Deploy-Preview.result == 'failure' }}
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          PR_ID: ${{ steps.pr_id_finder.outputs.pr }}
        run: |
          gh pr comment $PR_ID --body "Deployment Failure"
      - name: Add PR Comment for Vercel Deployment Success
        if: ${{ steps.pr_id_finder.outputs.pr && needs.Deploy-Preview.result == 'success' }}
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          PR_ID: ${{ steps.pr_id_finder.outputs.pr }}
        run: |
          gh pr comment $PR_ID --body "Deployment Success; Changes available at ${{ needs.Deploy-Preview.outputs.preview_url }}"

.github/workflows/vercel-production.yaml

name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
jobs:
  Deploy-Production:
    name: Deploy to Vercel Production Hosting
    runs-on: ubuntu-latest
    outputs:
      production_url: ${{ steps.production-deployment.outputs.preview_url }}
    steps:
      - name: Initial Checkout
        uses: actions/checkout@v4.1.7
      - name: Install Typescript Compile Tools
        run: npm install --global tsup typescript
      - name: Compile Typescript
        run: npm run build
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel for Production
        id: production-deployment
        run: |
          production_url=$(vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }})
          echo "production_url=$production_url" >> $GITHUB_OUTPUT

  Github-Deployment:
    name: Create Github Deployment for Production Environment
    runs-on: ubuntu-latest
    needs: Deploy-Production
    permissions:
      deployments: write
    steps:
      - name: Add Failed Production Deployment
        id: production-deployment-failure
        if: ${{ needs.Deploy-Production.result == 'failure' }}
        uses: chrnorm/deployment-action@v2.0.7
        with:
          token: '${{ secrets.GITHUB_TOKEN }}'
          initial-status: 'failure'
          environment-url: ${{ needs.Deploy-Production.outputs.production_url }}
          environment: production
      - name: Add Successful Production Deployment
        id: production-deployment-success
        if: ${{ needs.Deploy-Production.result == 'success' }}
        uses: chrnorm/deployment-action@v2.0.7
        with:
          token: '${{ secrets.GITHUB_TOKEN }}'
          initial-status: 'success'
          environment-url: ${{ needs.Deploy-Production.outputs.production_url }}
          environment: production

The vercel deployment is now no longer happening, and the github-action is still happening and successfully deploying! For some reason, the line setting the preview-url as an output doesn’t seem to be triggering, leading to a deployment with no url attached. Will need to debug that and figure out why.

If anyone has any suggestions for improving this or what might be wrong with the workflow, would definitely appreciate the help, but thanks already for the great advice and helping me get this far!

1 Like
4

Had a silly typo where I said the output production_url should be set to steps.production-deployment.outputs.preview_url, marking the previous reply as the solution but can’t edit it anymore. Gonna keep going with this , add db capabilities, then turn it into a template repo and post it under the Community tag for others to hopefully use.

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.