How to Integrate Lovable with Joomla

Joomla 4.0+ includes the Web Services API built-in, but it requires a plugin to be enabled and an API token to be generated before it can be called. First, enable the API Authentication plugin: In your Joomla administrator, go to Extensions → Plugins. Search for 'API Authentication'. Find 'API Authentication - Web Services' and make sure its status is 'Enabled' (green checkmark). If it is disabled, click on it and change Status to Enabled, then save. Next, generate an API token for a Super User: Go to Users → Manage. Click on a Super User account (usually 'Super User' or your main admin account). In the user editing form, look for the 'Joomla API Token' tab on the right side (in Joomla 4) or the API Token section within the user form. Click 'Generate a new token'. Copy the generated token — it is shown once and looks like a long alphanumeric string. In Lovable, click '+' next to Preview to open the Cloud panel, then click 'Secrets'. Add: - JOOMLA_SITE_URL — your Joomla site's base URL (e.g., https://www.yoursite.com) - JOOMLA_API_TOKEN — the generated API token Verify the API is working by visiting https://www.yoursite.com/api/index.php/v1/articles in a browser (you will see an authorization error, confirming the endpoint exists and requires the token — that is correct behavior).

The Edge Function proxies requests to Joomla's /api/index.php/v1/ endpoints with the API token in the Authorization header. Joomla's API follows the JSON:API specification, which means responses are structured differently from WordPress — data is in a 'data' array with 'attributes' and 'relationships' objects rather than flat objects. Joomla API endpoints for common resources: - Articles: GET /api/index.php/v1/articles - Single article: GET /api/index.php/v1/articles/{id} - Categories: GET /api/index.php/v1/categories?component=com_content - Menus: GET /api/index.php/v1/menus - Menu items: GET /api/index.php/v1/menus/{menu-id}/items - Tags: GET /api/index.php/v1/tags Query parameters for articles: - filter[category_id]={id} — filter by category - filter[state]=1 — only published articles - page[offset]={n}&page[limit]={n} — pagination - sort=title — sort field - filter[search]={term} — text search The Edge Function accepts a 'path' parameter and proxies it to Joomla, making it reusable for any Joomla API endpoint.

1// supabase/functions/joomla-proxy/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
9
10  try {
11    const { path } = await req.json() as { path: string };
12
13    if (!path) {
14      return new Response(JSON.stringify({ error: 'path is required (e.g., /articles?filter[state]=1)' }), {
15        status: 400,
16        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
17      });
18    }
19
20    const siteUrl = Deno.env.get('JOOMLA_SITE_URL')!.replace(/\/$/, '');
21    const apiToken = Deno.env.get('JOOMLA_API_TOKEN')!;
22
23    const url = `${siteUrl}/api/index.php/v1${path.startsWith('/') ? path : '/' + path}`;
24
25    const joomlaResponse = await fetch(url, {
26      headers: {
27        'Authorization': `Bearer ${apiToken}`,
28        'Accept': 'application/vnd.api+json',
29        'Content-Type': 'application/vnd.api+json',
30      },
31    });
32
33    if (!joomlaResponse.ok) {
34      const errText = await joomlaResponse.text();
35      console.error(`Joomla API error ${joomlaResponse.status} for path: ${path}`);
36      return new Response(JSON.stringify({ error: `Joomla API returned ${joomlaResponse.status}`, detail: errText }), {
37        status: joomlaResponse.status,
38        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
39      });
40    }
41
42    const data = await joomlaResponse.json();
43
44    // Joomla JSON:API response has data[] and links for pagination
45    return new Response(JSON.stringify({
46      data: data.data ?? data,
47      links: data.links ?? null,
48      meta: data.meta ?? null,
49    }), {
50      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
51    });
52  } catch (error) {
53    console.error('joomla-proxy error:', error);
54    return new Response(JSON.stringify({ error: String(error) }), {
55      status: 500,
56      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
57    });
58  }
59});

With the Edge Function deployed, build the frontend components that display Joomla content. Joomla's JSON:API response structure requires some mapping before display — each article is at data[n].attributes, with fields like title, introtext, fulltext, catid, images (JSON-encoded image paths), publish_up (publish date), and metadesc. For article images: Joomla stores images as a JSON string in the 'images' field. Parse it to extract images.image_intro (the intro/list image URL) and images.image_fulltext (the article detail page image). Prepend JOOMLA_SITE_URL to these relative paths to construct absolute image URLs. For article body content: introtext contains the text shown in listings. fulltext contains the continuation after a Read More break. For article detail pages, combine introtext + fulltext and render as HTML (sanitize with DOMPurify). For pagination: Joomla's JSON:API pagination uses links.next and links.prev URL fields rather than page numbers — follow these links for next/previous page navigation, or parse the offset parameter from the links.next URL to build numbered pagination. Ask Lovable to build the article listing and detail pages using these field mappings: