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

 

Prerequisites and Project Overview

 

• Ensure you have a Kentico project with Headless Content enabled and obtain your API endpoint, project identifier, and API key from Kentico.
• This guide assumes your Lovable project is built using TypeScript. You will create a configuration file, a service file to handle Kentico API calls, and update your main application file to integrate the retrieved content.
• Since Lovable doesn’t have a terminal, any dependency installation must be managed by including code or CDN scripts directly in your project files. In our case, we use the built‑in fetch method so no additional dependencies are needed.

 

Creating the Kentico Configuration File

 

• Create a new folder in your project root named config.
• Inside the config folder, create a new file named kentico.config.ts.
• Insert the following code into kentico.config.ts. This file stores your Kentico API details.

export const KENTICO_CONFIG = {
  baseUrl: 'https://your-kentico-instance.api.kentico.com', // Replace with your Kentico API base URL
  projectId: 'yourprojectid', // Replace with your Kentico project ID
  apiKey: 'yourapikey'        // Replace with your Kentico API key
};

 

Creating the Kentico Service File

 

• Create a new folder in your project root named services (if not already existing).
• Within the services folder, create a file named kenticoService.ts.
• Copy and paste the following code snippet into kenticoService.ts. This service calls the Kentico Headless API to retrieve content based on a content type.

import { KENTICO_CONFIG } from '../config/kentico.config';

export class KenticoService {
  async getContent(contentType: string): Promise {
    const url = ${KENTICO_CONFIG.baseUrl}/projects/${KENTICO_CONFIG.projectId}/items?system.type=${contentType};
    const response = await fetch(url, {
      headers: {
        'Authorization': Bearer ${KENTICO_CONFIG.apiKey}
      }
    });
    if (!response.ok) {
      throw new Error('Failed to fetch content from Kentico');
    }
    return await response.json();
  }
}

 

Integrating the Kentico Service into Your Main Application

 

• Open your main application file (for example, app.ts or any file where you want to load Kentico content).
• At the top of the file, import the KenticoService class as shown in the code snippet below.
• Call the KenticoService method to fetch and process your Kentico content. Adjust the content type (e.g., 'article') as required by your project setup.

import { KenticoService } from './services/kenticoService';

const kenticoService = new KenticoService();

async function loadContent() {
  try {
    const content = await kenticoService.getContent('article'); // Replace 'article' with your desired content type
    console.log('Kentico content:', content);
    // Process and integrate the content into your Lovable project as needed.
  } catch (error) {
    console.error('Error loading Kentico content:', error);
  }
}

loadContent();

 

Final Integration Notes

 

• Ensure that the file paths used in the import statements match your project directory structure.
• Replace placeholder values in the configuration file with your actual Kentico API details.
• If you need to add additional API calls or handle different content types, extend the KenticoService class accordingly.
• Since Lovable doesn’t support a terminal, make sure any external dependencies (if later required) are included via script tags in your HTML or directly in your project code.

 

Testing the Integration

 

• After inserting and saving these files, open your Lovable project in the browser.
• Open the browser console to see the logged Kentico content. This confirms that your integration is working correctly.
• Adjust error handling and data processing in the code as necessary for your project’s needs.