Creating GitHub Actions for Vercel Deployment
GitHub and Vercel can help you streamline your workflow in new ways. In this article, we take a look at how GitHub Actions interact with Vercel.
Join the DZone community and get the full member experience.
Join For FreeVercel 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 more fascinating. When a new update is pushed to GitHub, this enables automated code deployment, streamlining your CI/CD workflow.
What Is 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.
With GitHub Actions, it's simple to automate all of your software activities. The platform also includes CI/CD, which allows you to customize code reviews, branch management, and issue triaging.
How Does GitHub Actions Work With Vercel?
GitHub Actions automatically deploys 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 a 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 projectId
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 this, 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 theorgId
in the.vercel/package.json
file in the project root directory.VERCEL_PROJECT_ID
: This is theprojectId
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 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, 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.
Published at DZone with permission of Ekekenta Odionyenfe. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments