How to Deploy a Frontend App to Vercel Using Jenkins

While most frontend teams rely on Vercel’s default Git integrations for automatic deployments, there are times when you need more control. Jenkins gives you that power—with fully customizable pipelines, conditional logic, and integrations tailored to your workflow.

In this article, you’ll learn how to set up a Jenkins pipeline that automatically builds and deploys a frontend application to Vercel whenever changes are pushed to your main branch.

We’ll cover the entire workflow, including securely managing your Vercel token, writing your Jenkinsfile, and verifying the deployment on the Vercel dashboard—all without relying on Vercel’s default GitHub or GitLab integrations.

Table of Contents

1. Prerequisites


2. 
   Setting Up Jenkins for CI/CD
   
   
   
   
   • Installing Jenkins via Docker (Recommended)
   
   
   • Installing Jenkins via Script (Linux)
   
   
   • First Time Setup
   
   
   • Creating a Jenkins Pipeline with Git Polling
   
   
   
   


3. 
   Creating the Jenkinsfile for Vercel Frontend Deployment
   
   
   
   
   • Explaining the Jenkinsfile
   
   
   
   


4. Setting Up the Vercel Token in Jenkins


5. Deploying and Testing the Frontend Application


6. Conclusion

Prerequisites

Before diving in, ensure you’ve got the following ready:

• A setup (self-hosted or via CI providers).


• A Vercel token with project-level scope and an appropriate expiry set.
  (If you haven’t generated one before, refer to the A Practical Guide to Deploying Frontend Apps on Vercel Using GitHub Actions article for a detailed walkthrough.


• Node.js installed in your Jenkins environment.


• Familiarity with the structure of your frontend app.

We’re using the same TypeScript-based frontend application introduced in the A Practical Guide to Deploying Frontend Apps on Vercel Using GitHub Actions. Read through that article first to get a solid understanding of the app layout before continuing.

Setting Up Jenkins for CI/CD

Before we can deploy anything with Jenkins, we need to make sure it's up and running correctly. Below is a guide on how to install Jenkins, configure your admin account, and create a pipeline that polls a Git repository.

Option 1: Installing Jenkins via Docker (Recommended)

If you’re comfortable with Docker, this is the fastest way to get started:

docker run -p 8080:8080 -p 50000:50000 \

  -v jenkins_home:/var/jenkins_home \

  jenkins/jenkins:lts

Once running, open .

N.B: You have to have Java installed on your machine.

First Time Setup

After installation:

1. 
   Unlock Jenkins:
   Visit http://localhost:8080. You’ll see a screen asking for an admin password. Run:
   

   sudo cat /var/lib/jenkins/secrets/initialAdminPassword

1. 
   Install Plugins:
   Choose Install Suggested Plugins.


2. 
   Create Admin User:
   Set up your Jenkins username, password, and full name.


3. 
   Confirm URL:
   You can leave the Jenkins URL as http://localhost:8080 unless you’re using a custom domain.

Creating a Jenkins Pipeline with Git Polling

1. 
   Create a New Jenkins Pipeline Job:

• From your Jenkins dashboard, click New Item.*


• Enter a name for your job (e.g., frontend-deploy-vercel) and select Pipeline.


• Click OK
  

1. 
   Configure the Pipeline:

• In the Pipeline job config, scroll to Pipeline → Definition, and set it to Pipeline script from SCM
  


• Set SCM to Git
  


• Paste your repository URL (GitHub or GitLab)


• (Optional but recommended) Add credentials if the repo is private

1. 
   Polling the Repository:

• Scroll down to Build Triggers
  


• Tick Poll SCM
  


• Use the schedule H/5 * * * * to check for changes every 5 minutes (You can adjust this later for performance)

Once this setup is complete, Jenkins will automatically poll your repo and run the defined pipeline when changes are pushed to the main branch.

Creating the Jenkinsfile for Vercel Frontend Deployment

To automate your frontend deployments to Vercel, create a Jenkinsfile at the root of your repository and include the following configuration:

pipeline {

  agent any



  environment {

    VERCEL_TOKEN = credentials('VERCEL_TOKEN')

  }



  stages {

    stage('Build and Deploy Frontend Service') {

      steps {

        dir('frontend') {

          sh 'npm install'

          sh 'npm run build'

          sh 'npx vercel --prod --token $VERCEL_TOKEN --yes'

        }

      }

    }

  }



  post {

    success {

      echo 'Frontend deployed successfully to Vercel.'

    }

    failure {

      echo 'Frontend deployment failed.'

    }

  }

}

Note: This assumes the vercel CLI is already installed globally in your Jenkins agent. If not,add npm install -g vercel before the deploy step.

Explaining the Jenkinsfile

• 
  pipeline { ... }: Defines the structure of the Jenkins pipeline in a declarative format. This setup helps automate and manage CI/CD tasks in a readable and maintainable way.


• 
  agent any: Specifies that this pipeline can run on any available Jenkins agent. This provides flexibility for most general-purpose use cases.


• 
  environment { VERCEL_TOKEN = credentials('VERCEL_TOKEN') }: Loads the VERCEL_TOKEN from Jenkins’ secure credentials store. This token is necessary for authenticating with Vercel’s CLI. By storing it as a secret credential in Jenkins, you keep your deployment pipeline secure and avoid hardcoding sensitive data.


• 
  stages { ... }: Defines the main steps in the pipeline.


• 
  stage('Build and Deploy Frontend Service')
  
  
  
  
  • 
    dir('frontend'): Changes directory into the frontend folder, which contains the codebase for the frontend application.
  
  
  • 
    sh 'npm install': Installs all required dependencies.
  
  
  • 
    sh 'npm run build': Compiles the application into production-ready static assets.
  
  
  • 
    sh 'npx vercel --prod --token $VERCEL_TOKEN --yes': Deploys the compiled application to Vercel using the CLI. The --prod flag ensures it's a production deployment, --yes bypasses interactive prompts, and the --token ensures authenticated access.
  
  
  
  
  
  



• 
  post { ... }: Handles actions that should run after the pipeline completes:
  
  
  
  
  • 
    success: Logs a confirmation message if the deployment is successful.
  
  
  • 
    failure: Outputs an error message to aid in troubleshooting if the deployment fails.
  
  
  
  
  
  

Once this is in place, every time your pipeline runs, Jenkins will automatically build and deploy your frontend service to Vercel. Next, we’ll cover how to securely add your Vercel token to Jenkins using the credentials store.

Setting Up the Vercel Token in Jenkins

For Jenkins to deploy your frontend application to Vercel, you'll need to store your Vercel token securely using Jenkins' credentials manager.

Step 1: Access Jenkins Credentials

1. From your Jenkins dashboard, go to Manage Jenkins → Credentials → (global) → Add Credentials.

Step 2: Add the Vercel Token

1. In the Add Credentials dialog:
   
   
   
   
   • 
     Kind: Choose Secret text.
   
   
   • 
     Secret: Paste your Vercel token.
   
   
   • 
     ID: Enter VERCEL_TOKEN (ensure it matches what you’ve referenced in your Jenkinsfile).
   
   
   • 
     Description: (Optional) e.g., Vercel Deployment Token.
   
   
   
   


2. Click OK to save the token.

You can obtain your token from the

• Head to the for more practical DevOps guides and automation tips. You can also connect with me on .
  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen