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

Contents
    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

    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.