Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

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

Try Storyblok

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

  • Home
  • Tutorials
  • How to run different build commands depending on the branch name in Vercel?
INFO:

On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

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.

Section titled The package.json set-up 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"
  },
}
    

Section titled The Vercel Project settings 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

Section titled The vercel.sh set-up 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.

Section titled Vercel System Environment Variables Vercel System Environment Variables

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

NameDescription
VERCEL_GIT_PROVIDERThe Git Provider the deployment is triggered from. In the case of GitHub, the value is always github.
VERCEL_GIT_REPO_SLUGThe origin repository of the app on GitHub. Example: my-site.
VERCEL_GIT_REPO_OWNERThe GitHub organization that owns the repository the deployment is triggered from. Example: acme.
VERCEL_GIT_REPO_IDThe ID of the GitHub repository the deployment is triggered from. Example: 117716146.
VERCEL_GIT_COMMIT_REFThe GitHub branch that the deployment was made from. Example: improve-about-page.
VERCEL_GIT_COMMIT_SHAThe GitHub SHA of the commit the deployment was triggered by. Example: fa1eade47b73733d6312d5abfad33ce9e4068081.
VERCEL_GIT_COMMIT_MESSAGEThe message attached to the GitHub commit the deployment was triggered by. Example: Update about page.
VERCEL_GIT_COMMIT_AUTHOR_LOGINThe GitHub username belonging to the author of the commit that the project was deployed by. Example: johndoe.
VERCEL_GIT_COMMIT_AUTHOR_NAMEThe GitHub name belonging to the author of the commit that the project was deployed by. Example: John Doe.

Author

Dominik Angerer

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Scriptconf and Stahlstadt.js.