How to Integrate Lovable with CircleCI

Before CircleCI can build your project, the source code must live in a GitHub repository. In your Lovable project, click the GitHub icon in the top-right corner. If this is your first time connecting GitHub to Lovable, you will be redirected to GitHub's OAuth authorization page — authorize the Lovable GitHub App and return to Lovable. Click the GitHub icon again, select 'Connect project', choose your organization, name the repository, and confirm. Lovable creates the repository and sets up two-way sync on the main branch. Every code change Lovable generates pushes to this repository automatically. Verify the connection by visiting github.com/{your-org}/{your-repo} and confirming the project source code is present. The repository should contain package.json, vite.config.ts, src/, and other standard Vite project files. CircleCI will clone this repository to run builds — the two-way sync means every Lovable AI session that generates code automatically triggers a new CircleCI build.

Go to app.circleci.com and sign in with your GitHub account — this gives CircleCI read access to your repositories. On the CircleCI dashboard, click 'Create Project' in the left sidebar. CircleCI shows your GitHub repositories — find your Lovable project repository and click 'Set Up Project'. CircleCI offers to use an existing .circleci/config.yml from the repository or to start with a template — select 'Skip this step, I'll use a config file I've already created' since you will add the file in the next step. Alternatively, use CircleCI's template selector to choose a Node.js template, which gives you a starter config to modify. Once the project is set up, CircleCI begins watching the repository for pushes. It will not trigger builds until a .circleci/config.yml exists on the default branch. Go to Project Settings → Environment Variables in CircleCI and add your deployment credentials here: VERCEL_TOKEN (your Vercel API token from vercel.com/account/tokens), VERCEL_ORG_ID (from your Vercel team settings), and VERCEL_PROJECT_ID (from the specific Vercel project settings). These are stored encrypted by CircleCI and injected into the build environment during pipeline runs.

Create a .circleci/config.yml file in your repository. This file defines the pipeline that CircleCI runs on every push. For a Lovable Vite and React TypeScript project on Node.js 22, the pipeline has four stages: restore the npm cache (for faster builds), install dependencies with npm ci, run the Vite build, and deploy to Vercel. The config below uses CircleCI's node orb which simplifies Node.js setup. Add this file to your repository either by cloning locally and pushing, or directly on GitHub by creating a new file at .circleci/config.yml. Once the file is on the main branch, CircleCI automatically detects it and triggers the first pipeline run. Watch the build in the CircleCI dashboard — each stage shows a green checkmark on success or a red X with a log on failure. The deployment stage only runs when the pipeline is on the main branch (the when condition), so feature branches only run install and build steps.

1# .circleci/config.yml
2version: 2.1
3
4orbs:
5  node: circleci/node@6.1.0
6
7jobs:
8  build-and-deploy:
9    docker:
10      - image: cimg/node:22.0
11    steps:
12      - checkout
13
14      - node/install-packages:
15          pkg-manager: npm
16          cache-path: ~/project/node_modules
17          override-ci-command: npm ci
18
19      - run:
20          name: Type Check
21          command: npx tsc --noEmit
22
23      - run:
24          name: Lint
25          command: npm run lint
26          # Remove '|| true' below if you want lint failures to block deploys
27          # command: npm run lint || true
28
29      - run:
30          name: Build
31          command: npm run build
32          environment:
33            VITE_SUPABASE_URL: $VITE_SUPABASE_URL
34            VITE_SUPABASE_PUBLISHABLE_KEY: $VITE_SUPABASE_PUBLISHABLE_KEY
35
36      - run:
37          name: Deploy to Vercel
38          command: |
39            if [ "$CIRCLE_BRANCH" = "main" ]; then
40              npm install --global vercel
41              vercel deploy --prod \
42                --token $VERCEL_TOKEN \
43                --yes
44            else
45              echo "Skipping deploy — not on main branch"
46            fi
47
48workflows:
49  build-and-deploy:
50    jobs:
51      - build-and-deploy

After the first successful build, the CircleCI dashboard shows the pipeline status for every push to the repository. Each push from Lovable's AI generation appears as a new pipeline run in the 'Pipelines' view. Click any pipeline to see the detailed log for each step — this is where you diagnose build failures caused by TypeScript errors, missing environment variables, or failed deployments. CircleCI sends email notifications for pipeline failures by default. To change notification settings, go to User Settings (your avatar in the top-right) → Notifications. For team setups, CircleCI integrates with Slack via the circleci/slack orb — add a few lines to your config.yml to post build status messages to a Slack channel. For the Slack orb, add 'orbs: slack: circleci/slack@4.13.3' to the top of your config.yml and add a 'slack/notify' step in the post section of your job. Store your Slack webhook URL as a CircleCI environment variable named SLACK_WEBHOOK. This creates a feedback loop where every Lovable AI generation either succeeds (new code deployed to production) or fails (Slack notification with the build log link so you can investigate and fix the error in Lovable).