How to create Github Actions for Vercel Deployment

How to create Github Actions for Vercel Deployment

Arctype's photo
Arctype
·

4 min read

Vercel is one of the best hosting services because of its simplicity and adaptability. It allows you to host your project as fast as possible with little or no setup. When Vercel is used with Github for project deployment, things get much more fascinating. When a new update is pushed to Github, this enables automated code deployment, streamlining your CI/CD workflow.

What are Github Actions?

GitHub Actions is a CI/CD platform for automating your build, test, and deployment workflows. You can build and test every pull request in your repository using workflows, or you may deploy merged pull requests to the production repository.

GitHub Actions make it simple to automate all of your software activities, and it now includes world-class CI/CD, which allows you to customize code reviews, branch management, and issue triaging.

How do Github Actions work with Vercel

​The Github actions automatically deploy your GitHub projects with Vercel, providing Preview Deployment URLs and automatic Custom Domain updates. When you create a new Vercel project on Github and enable automatic deployments on every branch, Vercel watches every push on the branch and deploys by default. If Vercel is already building a previous commit, the current build will be canceled to build the most recent commit so that you always have the latest changes deployed.

  • Option 1 for testing: The Fork Model
  • Option 2 for testing: tmate

The Problem with Testing Github Actions

Github Actions in Action

To demonstrate how to deploy an application to Vercel using Github actions, I have created and pushed a simple React project to my Github repository. Clone the repository to your computer and follow along.

Configuring Vercel

To set up Github action with Vercel, you need a Vercel project ID and org ID. To do that, run the command below and follow the prompts:

vercel

The above command will generate a .vercel/package.json file where your pojectId and orgId are generated.

Perhaps, you can tell Vercel not to trigger project deployment when you push your code to GitHub. This way, the GitHub Actions workflow only gets triggered when there is a release, push to a specific branch or manual trigger on the workflow. To do, create a vercel.json file in your project root directory and add the configurations below:

 {
     "github": {
       "enabled": false,
       "silent": true
     }
    }

Next, you need to generate a token on Vercel to enable you to use the CLI on GitHub Actions. Once you generate the token, copy the token and save it in a safe place. You'll need it later.

Then push your project to Github. Once the push is completed, go to the project on Github. In the settings tab, click on "Secrets > Actions" and add the Vercel credentials to your project. On the Actions page, click on the Create repository secret button and add the following secrets.

  • VERCEL_ORG_ID: This is the orgId in the .vercel/package.json file in the project root directory.
  • VERCEL_PROJECT_ID: This is the projectId in the .vercel/package.json file in the project root directory.
  • VERCEL_TOKEN: This is the vercel token you generated.

After creating the above credentials, we should be ready to configure the workflow.

Configuring the GitHub Workflow

With the Vercel your Vercel credentials added to your project on Github, go ahead and configure the Github workflow to enable continuous and continuous deployment. To do that, create a .github/workflows/deploy.yml file in the project root directory and add the following configurations specified below:

# This workflow will do a clean installation of the dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: "Deploy CI"

on:
 release:
   types:
     - published
 push:
   branches:
     - main
 workflow_dispatch:

jobs:
 vercel:
   runs-on: ubuntu-latest
   name: "Deploy application"

   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
         node-version: '14'
         registry-url: https://registry.npmjs.org/

     - name: "Deploy application"
       run: |
         prodRun=""
         if [[ ${GITHUB_REF} == "refs/heads/main" ]]; then
           prodRun="--prod"
         fi

         npx vercel --token ${VERCEL_TOKEN} $prodRun
       env:
         VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

Now commit the changes and push your code to Github. Once the code is pushed, The Github actions will trigger an automatic deployment.

Conclusion

Throughout this tutorial, you’ve learned how to set up Github Actions to deploy your project to Vercel. You learned what Github actions are and how they work with Vercel. Now that you have learned how Github and Vercel work together, feel free to glance at some more configurations to add to your project.

Also, feel free to reach out to the author of this blog on Twitter, check the Arctype blog for more content, and until next time!

technologyProgramming BlogsVercelgithub-actionsGitHub