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.
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
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:
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
orgIdfrom the JSON file created with the
- VERCEL_PROJECT_ID: Value is the
projectIdfrom the JSON file created with the
- 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:
Info When the action runs for any other branch than my
mainbranch, 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.