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

 

Adding Git Dependency in Package Configuration

  Ensure your Lovable project’s package.json includes the simple-git dependency. Since Lovable doesn’t have a terminal, you need to manually add it to your configuration file. Open your package.json file and add the dependency as shown below.

{
  "name": "lovable-project",
  "version": "1.0.0",
  "dependencies": {
    "simple-git": "^3.16.0"
    // Include other dependencies as needed
  },
  "scripts": {
    "start": "node dist/main.js"
  }
}

 

Creating the Git Integration Module

  Create a new file named gitIntegration.ts in the root directory of your project. This module will handle Git operations such as adding changes, committing, and pushing them to your Git repository.

import simpleGit, { SimpleGit } from 'simple-git';

const git: SimpleGit = simpleGit();
export async function commitAndPush(commitMessage: string): Promise {
  try {
    // Stage all changes
    await git.add('.');
    // Commit changes with the provided message
    await git.commit(commitMessage);
    // Push the commit to the remote repository
    await git.push();
    console.log('Changes pushed successfully!');
  } catch (error) {
    console.error('Failed to push changes:', error);
  }
}

 

Integrating Git Functionality into Your Main Code

  In your main application file (for example, main.ts), import and use the commitAndPush function from the Git integration module. Add the following snippet in the section where you want to trigger Git operations (for instance, after a significant update or event).

import { commitAndPush } from './gitIntegration';

// Example function where Git operations are triggered
async function updateApplicationData() {
  // Your application logic here, for example, updating data
  // ...
  // Call commitAndPush to commit and push changes automatically
  await commitAndPush('Auto commit: updated application data');
}
// Call the function at an appropriate time in your code
updateApplicationData();

 

Building the TypeScript Project

  Since Lovable does not have a terminal, configure your project to build TypeScript automatically by ensuring you have a tsconfig.json file in your project root. If it doesn’t exist, create one with the following content.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [ "gitIntegration.ts", "main.ts" ]
}

 

Triggering the Build Process

  Lovable may not offer a direct terminal interface, so you should integrate the build process into your project’s startup script. Modify your package.json scripts to include a build step. When your project runs, it should first compile TypeScript files.

{
  "scripts": {
    "build": "tsc",
    "start": "npm run build && node dist/main.js"
  }
}

 

Using the Git Integration in Your Lovable Project

  With the above code in place, every time the updateApplicationData function is executed, your project will automatically stage, commit, and push changes to your Git repository. Ensure your Git repository is properly configured in your project’s Git settings so that simple-git can connect and operate correctly.