How to run different build commands depending on the branch name in Vercel?

We've recently changed our website deployment process over to our friends at Vercel and were facing the challenge to deploy a preview version of our site using a different package.json script. So depending on us pushing on main or any other branch, we wanted to execute a different build task. Let's jump right in on how to achieve that using an additional shell script. We will show this by using our use-case with different build tasks in a package.json. However, this will work with any other CLI tool you want to execute.

The package.json set-up

In our package.json we've two different scripts defined such as the two demo scripts below:

        
      {
  ...
  "scripts": {
    "build:not-main": "node run-for-all-except-main.js",
    "build:main": "node run-only-for-main.js"
  },
}
    

The Vercel Project settings

In your Vercel Project settings where you will have something like npm run build, next build, or any other build task depending on your project type we're now going to configure custom build task command.

        
      sh vercel.sh
    

The vercel.sh set-up

To set-up the vercel.sh we will navigate in the base folder of our project and create a new file called vercel.sh. In this shell script, we're now able to access our environment variables. This script allows us to access Custom Environment Variables and also gives us access to so-called Vercel System Environment Variables which we will make us of in our shell script.

        
      #!/bin/bash

if [[ $VERCEL_GIT_COMMIT_REF == "main"  ]] ; then 
  echo "This is our main branch"
  npm run build:main
else 
  echo "This is not our main branch"
  npm run build:not-main
fi
    

Vercel System Environment Variables

Since it's tough to find the Vercel System Environments, we list them for you below.