How to Connect a Custom Backend (Express, Django, FastAPI) to Lovable

Why connecting a custom backend to Lovable requires cross-origin and authentication handling

Lovable generates a React frontend with Supabase as the default backend. But many projects need a custom backend — an Express API for business logic, a Python server for machine learning, or a legacy system with an existing REST API. Connecting these requires understanding how the Lovable frontend communicates with external servers. The main challenge is CORS (Cross-Origin Resource Sharing). Your Lovable app runs at one domain (your-app.lovable.app or your custom domain), and your backend runs at a different domain (api.yourservice.com). Browsers block cross-origin requests by default unless the backend explicitly allows them. The second challenge is authentication. Your custom backend likely requires API keys or auth tokens that should never appear in frontend code. For public-facing endpoints, you can call them directly from React with proper CORS headers. For authenticated endpoints, route requests through a Supabase Edge Function that adds the credentials server-side. The third consideration is architecture. Decide early whether your Lovable frontend should talk to your backend directly, through Edge Functions as a proxy, or through both depending on the endpoint. A clear architecture prevents the spaghetti pattern where some calls go through Edge Functions and others go direct without any consistency.

• CORS blocking requests from Lovable domain to custom backend server
• Backend API keys hardcoded in frontend React code instead of using Edge Functions
• Backend URL not stored as environment variable — breaks when deploying to different environments
• Authentication tokens not passed correctly between Lovable frontend and custom backend
• Mixed architecture — some API calls go direct, others through Edge Functions, with no clear pattern

Error messages you might see

Before you start

• A Lovable project open in the editor
• A custom backend deployed to a publicly accessible URL (not localhost)
• Your backend API documentation (endpoints, authentication method, request format)
• CORS configured on your backend to accept requests from your Lovable domain

How to fix it

// WRONG: backend URL hardcoded — breaks across environments
const response = await fetch('https://api.yourservice.com/users');

// CORRECT: URL from environment variable via config
// src/config/api.ts
export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? '';
// In your component or service:
import { API_BASE_URL } from '@/config/api';
const response = await fetch(`${API_BASE_URL}/users`);

// Express backend with NO CORS — blocks all browser requests
const express = require('express');
const app = express();
app.get('/api/users', (req, res) => {
  res.json({ users: [] });
});

// Express backend with proper CORS configuration
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
  origin: [
    'https://your-app.lovable.app',     // Lovable preview
    'https://your-custom-domain.com',    // Production
    'http://localhost:8080',             // Local development
  ],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
}));
app.get('/api/users', (req, res) => {
  res.json({ users: [] });
});

// Scattered fetch calls across components — inconsistent error handling
async function loadUsers() {
  const res = await fetch('https://api.yourservice.com/users');
  return res.json();
}

// src/services/backendApi.ts — centralized API layer
import { API_BASE_URL } from '@/config/api';
class BackendApi {
  private baseUrl: string;
  constructor() {
    this.baseUrl = API_BASE_URL;
  }
  private async request<T>(path: string, options?: RequestInit): Promise<T> {
    const response = await fetch(`${this.baseUrl}${path}`, {
      ...options,
      headers: {
        'Content-Type': 'application/json',
        ...options?.headers,
      },
    });
    if (!response.ok) {
      throw new Error(`API error: ${response.status} ${response.statusText}`);
    }
    return response.json();
  }
  async getUsers() {
    return this.request<{ users: User[] }>('/api/users');
  }
  async createUser(userData: CreateUserInput) {
    return this.request<User>('/api/users', {
      method: 'POST',
      body: JSON.stringify(userData),
    });
  }
}
export const backendApi = new BackendApi();

// WRONG: API key sent from the browser
const response = await fetch('https://api.yourservice.com/admin/data', {
  headers: { 'X-API-Key': 'secret-admin-key-123' },
});

// CORRECT: Frontend calls Edge Function, Edge Function adds the key
// Frontend:
const response = await fetch('/functions/v1/backend-proxy', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ path: '/admin/data', method: 'GET' }),
});
// Edge Function (supabase/functions/backend-proxy/index.ts):
const backendUrl = Deno.env.get('BACKEND_URL');
const apiKey = Deno.env.get('BACKEND_API_KEY');
const backendResponse = await fetch(`${backendUrl}${path}`, {
  method,
  headers: { 'X-API-Key': apiKey!, 'Content-Type': 'application/json' },
});

Complete code example

1/**
2 * Centralized API service for connecting to a custom backend.
3 * Handles base URL, headers, error handling, and response parsing.
4 *
5 * Usage:
6 *   import { backendApi } from '@/services/backendApi';
7 *   const users = await backendApi.get<User[]>('/api/users');
8 */
9
10const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? '';
11
12interface ApiOptions extends Omit<RequestInit, 'body'> {
13  body?: unknown;
14}
15
16class BackendApiService {
17  async request<T>(path: string, options: ApiOptions = {}): Promise<T> {
18    const { body, headers, ...rest } = options;
19
20    const response = await fetch(`${API_BASE_URL}${path}`, {
21      ...rest,
22      headers: {
23        'Content-Type': 'application/json',
24        ...headers,
25      },
26      body: body ? JSON.stringify(body) : undefined,
27    });
28
29    if (!response.ok) {
30      const errorText = await response.text();
31      throw new Error(
32        `Backend API error (${response.status}): ${errorText}`
33      );
34    }
35
36    return response.json();
37  }
38
39  get<T>(path: string, headers?: HeadersInit) {
40    return this.request<T>(path, { method: 'GET', headers });
41  }
42
43  post<T>(path: string, body: unknown) {
44    return this.request<T>(path, { method: 'POST', body });
45  }
46
47  put<T>(path: string, body: unknown) {
48    return this.request<T>(path, { method: 'PUT', body });
49  }
50
51  delete<T>(path: string) {
52    return this.request<T>(path, { method: 'DELETE' });
53  }
54}
55
56export const backendApi = new BackendApiService();

Best practices to prevent this

• Store backend URLs as VITE_ environment variables — never hardcode URLs that differ between environments
• Configure CORS on your backend with specific allowed origins for production — avoid wildcard (*) in production
• Create a centralized API service layer so all backend calls have consistent error handling and header management
• Route authenticated requests through Edge Functions to keep API keys and service credentials off the frontend
• Document your API architecture clearly — which calls go direct vs through Edge Functions, and why
• Handle loading, error, and empty states in every component that calls your backend
• Test your backend connection from the Lovable preview domain before deploying — CORS settings must match the preview URL too

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns