Lovable and CircleCI integration: Step-by-Step Guide 2025

 

Creating the CircleCI Configuration File

 

• Create a new folder at the root directory of your Lovable project and name it .circleci.
• Inside the .circleci folder, create a new file named config.yml.
• Copy the following content into config.yml. This configuration uses CircleCI’s 2.1 config version, sets up a job that runs on a Node Docker image, installs dependencies, builds your TypeScript code, and runs tests.

  
  version: 2.1
  
  jobs:
    build:
      docker:
      - image: circleci/node:14
      working_directory: ~/repo
      steps:
      - checkout
      - run: npm install
      - run: npm run build
      - run: npm test
  workflows:
    version: 2
    buildandtest:
      jobs:
      - build
      

  
  

 

Updating Package Configuration for CI Scripts

 

• Open your project’s package.json file located at the root directory of your Lovable project.
• Within the scripts section, add or update the following scripts:

  
  "scripts": {
    "build": "tsc",
    "test": "jest",
    "ci": "npm install && npm run build && npm test"
    // ... other scripts
  }
      

• This ensures that when CircleCI runs the build job, all necessary dependencies are installed, the TypeScript code is compiled to JavaScript, and the tests are executed.

 

Adding a TypeScript Configuration File

 

• If your project does not already have one, create a file named tsconfig.json in the root directory of your Lovable project.
• Insert the following minimal configuration. Adjust the include path if your TypeScript source files reside in a different folder:

  
  {
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "outDir": "./dist",
      "strict": true,
      "esModuleInterop": true
    },
    "include": ["src/*/"]
  }
      

 

Integrating Dependencies Installation via Code

 

• Since Lovable does not have a terminal, ensure that any missing dependencies are added directly in your package.json under dependencies or devDependencies. For example, to add TypeScript and Jest for testing, include:

  
  "devDependencies": {
    "typescript": "^4.0.0",
    "jest": "^27.0.0",
    "@types/jest": "^27.0.0"
  }
      

• This way, whenever the project is updated or shared, these dependencies are automatically installed when the CircleCI pipeline runs the npm install command.

 

Final Integration Check

 

• Review all the added files and updates: .circleci/config.yml, package.json modifications, and tsconfig.json.
• Commit these changes to your repository. CircleCI will automatically detect the .circleci/config.yml file and start running your defined pipeline on the next commit.
• This configuration will build your TypeScript project, run its tests, and notify you of any issues as part of your continuous integration process.