[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Help](/c/help/9) # Switching from github integration to manual CI/CD through github actions 262 views · 3 likes · 4 posts 0mn1core (@omn1coreprocessing-g) · 2024-08-19 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](https://vercel.com/guides/how-can-i-use-github-actions-with-vercel#configuring-github-actions-for-vercel). 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](https://github.com/marketplace/actions/await-for-vercel-deployment) and [url fetch action](https://github.com/marketplace/actions/vercel-preview-url). 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](https://github.com/0mn1core/express-typescript-vercel-template) Amy Egan (@amyegan) · 2024-08-19 · ♥ 1 Hi @omn1coreprocessing-g. You can use [git.deploymentEnabled](https://vercel.com/docs/projects/project-configuration/git-configuration#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: - Use [`pull_request`](https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows#pull_request) to start a new deployment when a PR is [opened](https://docs.github.com/en/webhooks/webhook-events-and-payloads?actionType=opened#pull_request), [edited](https://docs.github.com/en/webhooks/webhook-events-and-payloads?actionType=edited#pull_request), or [synchronize](https://docs.github.com/en/webhooks/webhook-events-and-payloads?actionType=synchronize#pull_request) - Use [`workflow_dispatch` ](https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows#workflow_dispatch) to trigger the workflow manually - [Use GitHub CLI in your workflow](https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/using-github-cli-in-workflows). For example, you could [add a comment to your PR](https://cli.github.com/manual/gh_pr_comment) with info about the deployment using the [`gh pr comment` command](https://cli.github.com/manual/gh_pr_comment). - Some people miss the deployment links in the comments and this is a way to replicate that feature with your custom workflow. Just make sure you [save the deployment URL from the deploy command](https://community.vercel.com/t/deployment-via-gitlab-ci-to-dev-domain/523/3) 0mn1core (@omn1coreprocessing-g) · 2024-08-20 · ♥ 1 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](https://vercel.com/docs/projects/project-configuration) 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](https://github.com/marketplace/actions/create-or-update-comment) 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 ```json { "version": 2, "rewrites": [ { "source": "/(.*)", "destination": "/api" } ], "git": { "deploymentEnabled": false } } ``` .github/workflows/vercel-preview.yaml ```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 ```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! 0mn1core (@omn1coreprocessing-g) · 2024-08-22 · ♥ 1 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.