How to Integrate Lovable with Jenkins

Before Jenkins can build your project, the source code must be in a GitHub repository. In your Lovable project, click the GitHub icon in the top-right corner. If you have not connected GitHub to your Lovable workspace yet, authorize the Lovable GitHub App via OAuth — click 'Connect GitHub', complete the authorization on GitHub's website, then return to Lovable. Click the GitHub icon again and select 'Connect project'. Choose your organization and give the repository a name. After connecting, Lovable creates the repository and establishes two-way sync — every code change Lovable makes pushes to this repository automatically. Verify the connection worked by visiting github.com/{your-org}/{your-repo} and confirming the source code is there. The repository should contain src/, supabase/, public/, package.json, vite.config.ts, and other standard project files. Note the full repository URL and the default branch name (main) — you will need these when configuring the Jenkins pipeline. Critical: never rename or delete this repository after connecting, as it breaks the Lovable sync permanently.

A Jenkinsfile defines the pipeline stages Jenkins will run for every build. Add a Jenkinsfile to the root of your Lovable GitHub repository. You can do this directly on GitHub (navigate to the repository, click 'Add file' → 'Create new file', name it Jenkinsfile) or by cloning the repository locally, creating the file, and pushing it. The Jenkinsfile should define stages for checkout, dependency installation, linting, building, and deployment. Lovable projects use Node.js 22 and Vite — the build command is npm run build and the output goes to the dist/ directory. If you are deploying to Vercel, install the Vercel CLI in your pipeline and use a Vercel token stored as a Jenkins credential. If you are deploying to Netlify, use the netlify-cli package. The example below shows a complete pipeline for a Vercel deployment. The tools directive uses the NodeJS 22 installation name you configured in Jenkins Tools — make sure the name in the Jenkinsfile matches exactly what you named the NodeJS installation in Jenkins.

1// Jenkinsfile (place in repository root)
2pipeline {
3    agent any
4
5    tools {
6        nodejs 'NodeJS-22'
7    }
8
9    environment {
10        VERCEL_TOKEN = credentials('vercel-token')
11        VERCEL_ORG_ID = credentials('vercel-org-id')
12        VERCEL_PROJECT_ID = credentials('vercel-project-id')
13    }
14
15    stages {
16        stage('Checkout') {
17            steps {
18                checkout scm
19            }
20        }
21
22        stage('Install Dependencies') {
23            steps {
24                sh 'node --version'
25                sh 'npm --version'
26                sh 'npm ci'
27            }
28        }
29
30        stage('Lint') {
31            steps {
32                sh 'npm run lint || true'
33            }
34        }
35
36        stage('Build') {
37            steps {
38                sh 'npm run build'
39            }
40            post {
41                success {
42                    echo 'Build succeeded — dist/ directory created'
43                }
44                failure {
45                    echo 'Build failed — check TypeScript errors above'
46                }
47            }
48        }
49
50        stage('Deploy to Vercel') {
51            when {
52                branch 'main'
53            }
54            steps {
55                sh 'npm install -g vercel'
56                sh 'vercel deploy --prod --token $VERCEL_TOKEN'
57            }
58        }
59    }
60
61    post {
62        always {
63            cleanWs()
64        }
65        failure {
66            echo 'Pipeline failed — check stage logs for details'
67        }
68    }
69}

In your Jenkins dashboard, click 'New Item' in the left sidebar. Enter a name for the job (e.g., 'lovable-app-pipeline'), select 'Multibranch Pipeline', and click OK. In the job configuration page, scroll to 'Branch Sources' and click 'Add source' → 'GitHub'. Enter your GitHub repository URL and select or add GitHub credentials (a personal access token with repo scope works). Jenkins scans the repository for branches containing a Jenkinsfile and creates a pipeline for each one. Under 'Scan Multibranch Pipeline Triggers', check 'Periodically if not otherwise run' and set the interval to 1 minute as a fallback — the primary trigger will be the webhook you set up in the next step. Save the configuration and click 'Scan Multibranch Pipeline Now'. Jenkins should detect the main branch and queue a first build. Watch the build log to confirm it finds the Jenkinsfile, installs Node.js 22, runs npm ci, and completes the build stage. Add your Vercel credentials to Jenkins before the Deploy stage runs: go to Manage Jenkins → Credentials → Add Credential, select 'Secret text', and add your Vercel token with the ID 'vercel-token'.

Rather than waiting for Jenkins to poll GitHub every minute, configure a GitHub webhook that triggers an immediate Jenkins build when Lovable pushes new code. In your GitHub repository, go to Settings → Webhooks → Add webhook. Set the Payload URL to your Jenkins server's webhook URL: https://your-jenkins-server.com/github-webhook/. Set Content type to 'application/json'. Under 'Which events would you like to trigger this webhook?', select 'Just the push event'. Click 'Add webhook'. GitHub will send a ping event to verify the connection — if your Jenkins server is publicly accessible and has the GitHub plugin installed, you will see a green checkmark next to the webhook. Back in Jenkins, your Multibranch Pipeline job should have 'GitHub hook trigger for GITScm polling' enabled under the job's configuration scan triggers. From this point forward, every time Lovable generates code and pushes to the GitHub repository, GitHub immediately notifies Jenkins, which starts a build within seconds. You can verify this by making a change in Lovable's chat and watching Jenkins trigger a new build automatically.

Your Lovable-generated Vite project may reference environment variables like VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY in the build. These are not secrets (they are safe to include in the frontend bundle) but they must be available during the Vite build process for the build to succeed. In Jenkins, add these as build environment variables: go to your pipeline job → Configure → Build Environment → 'Inject environment variables' (using the EnvInject plugin) or add them directly to the Jenkinsfile's environment block. Alternatively, create a .env.production file in your repository with the Vite variable values — Vite automatically reads this file during the production build. The Supabase URL and anon key are not secrets and are safe to commit to the repository in a .env.production file. Do not confuse these with the secret keys used in Edge Functions — those live in Lovable's Cloud Secrets and are never part of the repository. If you are unsure which variables your project needs, check src/integrations/supabase/client.ts in the repository — it shows the environment variables Vite uses for the Supabase client initialization.

1// Add to Jenkinsfile environment block, or create .env.production in repo root
2// These are build-time variables for Vite (not secrets — safe to commit)
3VITE_SUPABASE_URL=https://your-project.supabase.co
4VITE_SUPABASE_PUBLISHABLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...