One of my favorite hosting companies is Vercel as they can provide simplicity and flexibility at the same time. I wanted to control my site's deployment process on Vercel entirely for a new product I am building.
Usually, when you use Vercel in combination with GitHub. It will automatically trigger new deployments when you push code. You can configure it to your needs, but the main issue is when you want to work with GitHub releases. Vercel cannot yet deploy on new releases.
There are a couple of ways to overcome this. You can, for instance, start a build by calling Vercel with a deploy hook. That way, you can call the hook from within your GitHub Actions workflow.
Another approach is to make use of the Vercel CLI and the combination of GitHub Actions. This approach is the one I used, as this gave me all the flexibility I needed during my CI/CD process.
Prerequisites
Before you start, you need to know your project ID and org ID from Vercel. The simplest way to get this is to link your project to Vercel. You can do this by using npx vercel link
.
Info: You read more about the CLI here: Vercel CLI. When you have not used it yet, it will first ask you to sign in.
When you ran the command, it will create a .vercel
folder in your project with a project.json
file. In that file, you will find the projectId
and orgId
, which you can use later in your GitHub Actions workflow.
Something else you need to configure is to disable GitHub for your project on Vercel. That way, you let Vercel know that you want to take over control, and it will not trigger when you push your code to GitHub.
To disable GitHub, you create a vercel.json
file in the root of your project (if it does not yet exist), and add the following contents to it:
{
"github": {
"enabled": false,
"silent": true
}
}
One more thing, a token
is required to use the CLI on GitHub Actions.
Go to Vercel Tokens, and create a new token. Keep this token safe, as you will need it later.
GitHub Secrets to configure
In your GitHub project, go to settings and add the following secrets:
-
VERCEL_ORG_ID: Value is the
orgId
from the JSON file created with thevercel link
command. -
VERCEL_PROJECT_ID: Value is the
projectId
from the JSON file created with thevercel link
command. - VERCEL_TOKEN: Value is the token you created previously.
The GitHub Workflow
The last step is to add the job to your GitHub workflow. Here is an example of how you could do this:
name: "Deploy"
on:
release:
types:
- published
push:
branches:
- dev
workflow_dispatch:
jobs:
vercel:
runs-on: ubuntu-latest
name: "Deploy front-end"
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: '14'
registry-url: https://registry.npmjs.org/
- name: "Deploy to Vercel"
run: |
prodRun=""
if [[ ${GITHUB_REF} == "refs/heads/main" ]]; then
prodRun="--prod"
fi
npx vercel --token ${VERCEL_TOKEN} $prodRun
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
Info: When the action runs for any other branch than my
main
branch, it will not deploy to production.
As you can see from the above workflow, the GitHub Actions workflow only gets triggered when there is a release, push to dev
, or manual trigger on the workflow.
Once you put this workflow in place, you are in control over all deployments to Vercel.
Article first published on eliostruyf.com
Top comments (2)
Nice one Elio, works great
Thanks @sajrashid