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 Vercel account with an existing project.
• A Jenkins 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 http://localhost:8080 in your browser.

Option 2: Installing Jenkins via Script (Linux)

If you're installing Jenkins natively:

# Add Jenkins repository and key
curl -fsSL https://pkg.jenkins.io/debian/jenkins.io-2023.key | sudo tee \
  /usr/share/keyrings/jenkins-keyring.asc > /dev/null

echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \
  https://pkg.jenkins.io/debian binary/ | sudo tee \
  /etc/apt/sources.list.d/jenkins.list > /dev/null

# Update and install
sudo apt update
sudo apt install jenkins -y

# Start Jenkins
sudo systemctl start jenkins

Jenkins will be accessible at http://localhost:8080.

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 Vercel dashboard:
Click your profile avatar → Account Settings → Tokens, then create a new one with a defined name, scope (recommended: project-specific), and expiration date.

Once stored, Jenkins will automatically inject the token into your pipeline when referenced using credentials('VERCEL_TOKEN').

Deploying and Testing the Frontend Application

After setting up the Jenkinsfile and securely storing your Vercel token, you can move ahead with deploying your frontend application.

Step 1: Execute the Build

• Click Build Now to kick off the process.
• Monitor progress in the Build History → select the build → Console Output.
• Jenkins will:

1. Install frontend dependencies in the frontend/ directory.
2. Build the project using npm run build.
3. Deploy to Vercel using the CLI and the stored token.

Step 2: Confirm Deployment

• Head to the Vercel dashboard and locate your project.
• Confirm the successful deployment and access the production URL.
• You can also inspect the deployment logs on Vercel for any additional diagnostics.

Conclusion

Using Jenkins to deploy frontend applications to Vercel brings structure and consistency to your release process. While Vercel’s Git integration works out of the box, Jenkins offers additional room to scale: conditional builds, preview environments, and integration with testing or linting tools.

In this article, we walked through setting up Jenkins, creating a pipeline job, storing Vercel tokens securely, and automating deployments with a structured Jenkinsfile. You also learned how to monitor builds and verify your production release via the Vercel dashboard.

This setup is a solid starting point for teams that want tight control over their CI/CD flows while still leveraging powerful hosting platforms like Vercel.

Found this guide useful? Follow EphraimX for more practical DevOps guides and automation tips. You can also connect with me on LinkedIn or explore more of my projects on my portfolio.