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

Contents

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
Vercel Build Command Setting

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

Ready to build your Next.js site?

Want to know how to build your site using Next.js and Storyblok deployed on Vercel? Check out our articles about Next.js and get started with your site.

Vercel System Environment Variables

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

Name Description
VERCEL_GIT_PROVIDER The Git Provider the deployment is triggered from. In the case of GitHub, the value is always github.
VERCEL_GIT_REPO_SLUG The origin repository of the app on GitHub. Example: my-site.
VERCEL_GIT_REPO_OWNER The GitHub organization that owns the repository the deployment is triggered from. Example: acme.
VERCEL_GIT_REPO_ID The ID of the GitHub repository the deployment is triggered from. Example: 117716146.
VERCEL_GIT_COMMIT_REF The GitHub branch that the deployment was made from. Example: improve-about-page.
VERCEL_GIT_COMMIT_SHA The GitHub SHA of the commit the deployment was triggered by. Example: fa1eade47b73733d6312d5abfad33ce9e4068081.
VERCEL_GIT_COMMIT_MESSAGE The message attached to the GitHub commit the deployment was triggered by. Example: Update about page.
VERCEL_GIT_COMMIT_AUTHOR_LOGIN The GitHub username belonging to the author of the commit that the project was deployed by. Example: johndoe.
VERCEL_GIT_COMMIT_AUTHOR_NAME The GitHub name belonging to the author of the commit that the project was deployed by. Example: John Doe.