Managing Git and Version Control in Lovable Projects

 
Adding the Git Library Dependency
 

• Open your main HTML file (for example, index.html) in the Lovable code editor.
• Inside the head section, add the following script tag to load the Git library. This example uses the isomorphic-git library from a CDN:
• Insert the code snippet below inside the head section, before any other script tags:

• 
  <script type="module" src="https://unpkg.com/[email protected]/dist/index.umd.min.js"></script>
        

 
Creating the Git Integration File
 

• Create a new file in your Lovable project and name it gitIntegration.js. Place this file in the main project folder.
• Paste the following code snippet into gitIntegration.js. This file contains functions to clone a repository and commit changes using Git:

• 
  /_ gitIntegration.js _/
  
  export async function cloneRepository(url, dir) {
    try {
      await git.clone({
        fs,
        http,
        dir: dir,
        url: url,
        singleBranch: true,
        depth: 1
      });
      console.log("Repository cloned successfully.");
    } catch (err) {
      console.error("Error cloning repository:", err);
    }
  }
  export async function commitChanges(dir, message) {
    try {
      // Add all changes in the directory
      await git.add({ fs, dir, filepath: '.' });
      // Commit the changes with the provided message
      await git.commit({
        fs,
        dir,
        message: message,
        author: {
          name: 'LovableUser',
          email: 'user@lovable.com'
        }
      });
      console.log("Changes committed successfully.");
    } catch (err) {
      console.error("Error committing changes:", err);
    }
  }
        

  
  

 
Configuring the Main Application to Use Git Integration
 

• Open your main application file (for example, lovable-app.js).
• At the top of the file, import the Git integration functions from gitIntegration.js by adding the following code snippet:

• 
  import { cloneRepository, commitChanges } from './gitIntegration.js';
        

• Within your application initialization or on a specific event (such as when the app loads), call the Git integration functions. For example, to clone a repository on startup, add:

• 
  window.addEventListener('load', async () => {
    const repoUrl = 'https://github.com/username/repository.git';
    const localDir = '/lovable/repository';
    await cloneRepository(repoUrl, localDir);
  });
        

 
Integrating Commit Functionality into the Application Workflow
 

• Decide where in your application users’ changes should trigger a commit. This could be after saving content or completing an edit.
• Insert the following code snippet at the appropriate location in your application workflow (for example, in a save function):

• 
  async function saveUserChanges() {
    // Your code to save user changes goes here
  
    // Commit the changes with a descriptive message
    await commitChanges('/lovable/repository', 'User updated content');
  }
        

  
  




• Ensure that this function is called whenever you want to apply Git commits as part of your app's workflow.

 
Setting Up Your Git Configuration File
 

• Create a new file in the root of your Lovable project called gitconfig.json. This file will store the information Lovable needs to connect to your Git repository.
• Paste the following code into the gitconfig.json file. This sample configuration shows the repository URL, the branch you are working on, and how you want the commit messages to be formatted:

  
  {
    "repository": "https://your.git.repo/url",
    "branch": "main",
    "commitMessageFormat": "Lovable Auto Commit: {message}"
  }
      

• This file acts as a guide for Lovable so it always knows where to send your code updates.

 
Creating a .gitignore File For Lovable
 

• In the root folder, create a new file named .gitignore. This file tells Git which files or folders it should ignore when saving changes.
• Add the following text into the .gitignore file. This example ignores auto-generated files, logs, and configuration files that should not be pushed:

  
  Ignore Lovable temporary and configuration files
  lovable\_temp/
  logs/
  config\_local.json
      

• By ignoring these files, you help prevent accidental commits of sensitive or unnecessary data.

 
Automating Dependency Installation Within Your Code
 

• Lovable does not offer a terminal for running installation commands, so you need to configure your code to automatically install any necessary modules if they are missing.
• Create or open your main project file (for example, app.js or main.js) and add the following snippet at the top of the file. This code attempts to require a dependency and includes comments on how to handle its installation within the Lovable environment:

  
  // Attempt to load the dependency 'exampleDependency'
  try {
    require.resolve('exampleDependency');
  } catch (e) {
    // Since Lovable has no terminal, use Lovable's built-in API to install dependencies.
    // For example, call a Lovable function that handles dependency installation:
    // lovable.installDependency('exampleDependency');
    console.log("exampleDependency not found. Initiating installation within Lovable.");
  }
      

• This approach ensures that even without a terminal, your project will always have the required modules available.

 
Integrating Git Commands Within Your Code
 

• Since direct access to Git commands is not available in Lovable, you should create functions in your code that trigger Git integration features through Lovable’s runtime environment.
• Add the following snippet to your main file to simulate a commit operation. This example logs the commit message and can be linked to Lovable's internal Git API:

  
  function commitChanges(message) {
    // Construct the commit message using your gitconfig.json rules if needed.
    // Here, we are simply logging the action.
    console.log("Committing changes with message:", message);
    // In a real Lovable environment, this is where you would invoke the internal API:
    // lovable.git.commit({ message: message });
  }
      

• With this function, you can easily call commitChanges("Your commit message") whenever you want to save your changes to Git.

 
Using Environment Variables Safely
 

• Never store sensitive details like your Git access token directly in your source code. Instead, create a separate configuration file for environment variables or use Lovable’s secure environment storage if available.
• Create (or update) a file called envconfig.json in your project root and add only non-sensitive details. For sensitive data, use Lovable's secure settings:

  
  {
    "repository": "https://your.git.repo/url",
    "branch": "main"
  }
      

• Then, use Lovable's secure environment management to store your tokens and secret keys safely. This way, your sensitive information remains protected.