Adding CI/CD Workflows for Lovable Projects

Why CI/CD workflows must be manually configured for Lovable

Lovable does not include built-in continuous integration or continuous deployment pipelines. When you click Publish in the Lovable editor, it deploys a snapshot of your current project — but there is no automated testing, no staging environment, and no branch-based deployment preview. For simple projects, this is fine. But as your project grows and you start collaborating with others through GitHub, you need automated workflows to catch bugs before they reach production. CI/CD solves three problems: it automatically tests your code when changes are pushed (so you catch errors before deploying), it deploys to staging or preview URLs for review (so you can test changes without affecting production), and it deploys to production automatically once changes are approved (so you do not have to manually click Publish every time). The most common approach for Lovable projects is to connect to GitHub, then use either GitHub Actions for custom workflows or Vercel/Netlify for automatic deployment. Since Lovable syncs code to GitHub on every AI interaction, your CI/CD pipeline runs automatically whenever the AI makes changes.

• Lovable has no built-in CI/CD — automated testing and deployment require external tools
• No automated testing before publish — errors in generated code can reach production uncaught
• No branch-based previews natively — you cannot preview changes on a separate URL before merging
• Manual publish required — clicking Publish every time is error-prone and easy to forget
• No staging environment — there is no way to test production builds separately from the live site

Error messages you might see

Before you start

• A Lovable project with GitHub integration enabled (Settings, then Connectors, then GitHub)
• A GitHub repository connected to your Lovable project
• A Vercel, Netlify, or similar hosting account (for automatic deployment)
• Basic understanding of what CI/CD does (automated testing and deployment)

How to fix it

1// vercel.json — add to project root for SPA routing
2{
3  "rewrites": [
4    { "source": "/(.*)", "destination": "/index.html" }
5  ]
6}

# No CI workflow — errors are only caught when you manually test

# .github/workflows/ci.yml
name: Build Check
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - name: Install dependencies
        run: npm ci
      - name: Type check
        run: npx tsc --noEmit
      - name: Build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}

# Build fails because env vars are missing
# Error: VITE_SUPABASE_URL is not defined

# GitHub repository → Settings → Secrets → Actions
# Add these secrets:
# VITE_SUPABASE_URL = https://your-project.supabase.co
# VITE_SUPABASE_PUBLISHABLE_KEY = eyJhbGc...
#
# The workflow references them with:
# env:
#   VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}

Complete code example

1name: CI/CD Pipeline
2
3on:
4  push:
5    branches: [main]
6  pull_request:
7    branches: [main]
8
9jobs:
10  build-and-check:
11    runs-on: ubuntu-latest
12
13    steps:
14      - name: Checkout code
15        uses: actions/checkout@v4
16
17      - name: Setup Node.js 22
18        uses: actions/setup-node@v4
19        with:
20          node-version: 22
21          cache: npm
22
23      - name: Install dependencies
24        run: npm ci
25
26      - name: TypeScript type check
27        run: npx tsc --noEmit
28        # Catches type errors without producing output files
29
30      - name: Build production bundle
31        run: npm run build
32        env:
33          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
34          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
35          VITE_SUPABASE_PROJECT_ID: ${{ secrets.VITE_SUPABASE_PROJECT_ID }}
36
37      - name: Check build output exists
38        run: |
39          if [ ! -d "dist" ]; then
40            echo "Build output directory 'dist' not found"
41            exit 1
42          fi
43          echo "Build successful — dist/ contains $(find dist -type f | wc -l) files"

Best practices to prevent this

• Connect GitHub before setting up CI/CD — Lovable's two-way sync ensures every AI change triggers your pipeline automatically
• Use Vercel for the simplest deployment setup — it auto-detects Vite projects and creates preview URLs for every branch
• Add a TypeScript type check step (npx tsc --noEmit) to catch errors the AI introduces before they reach production
• Store all environment variables in GitHub Secrets — never hardcode Supabase URLs or keys in workflow files
• Use npm ci instead of npm install in CI workflows — it is faster and ensures reproducible builds from the lockfile
• Enable branch-based previews (Vercel does this automatically) so you can test changes before merging to main
• Cache node_modules in GitHub Actions using actions/setup-node with cache: npm to speed up builds
• Add a vercel.json with SPA rewrites to prevent 404 errors on direct page navigation in the deployed app

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns