Migriere dein Lovable-Projekt zu OptimoCMS. Importiere Inhalte, Bilder und Design Tokens unter Beibehaltung deines Designs.

Import aus Lovable

Name: OptimoCMS SDK
Author: OptimoCMS

Hast du eine Website in Lovable gebaut und möchtest sie zu OptimoCMS migrieren, um mehr Kontrolle, API-Zugang und Skalierbarkeit zu erhalten? Dieses Tutorial führt dich durch den gesamten Migrationsprozess.

In diesem Tutorial:

Lovable-Projekt über das SDK und MCP verbinden
Inhalte und Bilder importieren
Design Tokens aus deinem Lovable-Design übernehmen
Manuelle Anpassungen nach dem Import

Voraussetzungen

Node.js 18+
npm install @optimocms/sdk
Die öffentliche URL deines Lovable-Projekts (z.B. https://dein-projekt.lovable.app)
Ein OptimoCMS API-Schlüssel

Schritt 1 — Lovable-Projekt vorbereiten

Vor dem Import:

Veröffentliche dein Lovable-Projekt — Stelle sicher, dass die Site auf einer .lovable.app URL live ist
Notiere deine Design-Entscheidungen — Farben, Schriften und Border-Radius, die du beibehalten möchtest
Prüfe Bilder — Alle Bilder müssen öffentlich zugänglich sein

Schritt 2 — Import über SDK starten

SDK

import { OptimoCMS } from '@optimocms/sdk';

const client = new OptimoCMS({
  apiKey: process.env.OPTIMOCMS_API_KEY!,
});

const importResult = await client.import.fromLovable('site_abc123', {
  projectUrl: 'https://mein-restaurant.lovable.app',
  name: 'Mein Restaurant (aus Lovable)',
});

console.log(`Import gestartet: ${importResult.importId}`);
console.log(`Status: ${importResult.status}`);
console.log(`Fortschritt: ${importResult.progress}%`);

MCP (Cursor / Claude)

In Cursor oder Claude Desktop:

Importiere das Lovable-Projekt unter https://mein-restaurant.lovable.app in meine OptimoCMS-Site "site_abc123". Nenne es "Mein Restaurant (aus Lovable)".

Das MCP-Tool import_from_lovable wird aufgerufen.

REST

curl -X POST https://api.optimocms.com/v1/sites/$SITE_ID/import/url \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://mein-restaurant.lovable.app",
    "name": "Mein Restaurant (aus Lovable)",
    "includeImages": true,
    "includeStyles": true,
    "source": "lovable"
  }'

Schritt 3 — Import-Status überwachen

Der Import läuft asynchron. Frage den Status ab, bis er fertig ist:

SDK

async function waitForImport(siteId: string, importId: string): Promise<void> {
  let status = await client.import.status(siteId, importId);

  while (status.status === 'queued' || status.status === 'processing') {
    console.log(`Import-Fortschritt: ${status.progress}% (${status.pagesImported} Seiten)`);
    await new Promise(resolve => setTimeout(resolve, 2000));
    status = await client.import.status(siteId, importId);
  }

  if (status.status === 'completed') {
    console.log(`✓ Import abgeschlossen! ${status.pagesImported} Seiten importiert`);
  } else {
    console.error(`✗ Import fehlgeschlagen: ${status.error}`);
  }
}

await waitForImport('site_abc123', importResult.importId);

REST

curl https://api.optimocms.com/v1/sites/$SITE_ID/import/$IMPORT_ID/status \
  -H "Authorization: Bearer $API_KEY"

Schritt 4 — Design Tokens übernehmen

Nach dem Import kannst du die Design Tokens feinjustieren:

SDK

const site = await client.sites.get('site_abc123');
console.log('Erkannte Tokens:', site.designTokens);

await client.designTokens.update('site_abc123', {
  colorPrimary: '#6366F1',
  colorBackground: '#FAFAFA',
  colorSurface: '#FFFFFF',
  colorText: '#18181B',
  colorTextMuted: '#71717A',
  fontBody: 'Inter',
  fontHeading: 'Inter',
  radiusCard: '12px',
  radiusButton: '8px',
  radiusInput: '8px',
});

console.log('✓ Design Tokens angepasst');

Schritt 5 — Inhalte prüfen und anpassen

Nach dem Import möchtest du die importierten Seiten überprüfen:

for await (const page of client.pages.list('site_abc123')) {
  console.log(`Seite: ${page.title} (/${page.slug}) — ${page.blocks.length} Blocks`);
}

const homePage = (await client.pages.list('site_abc123')).data
  .find(p => p.slug === 'home' || p.slug === '/');

if (homePage) {
  await client.seo.update('site_abc123', homePage.id, {
    title: 'Mein Restaurant — Die beste italienische Küche',
    description: 'Reserviere jetzt im Mein Restaurant. Frische Pasta, Pizza und Antipasti im Herzen von Amsterdam.',
  });

  console.log('✓ SEO für Homepage aktualisiert');
}

Schritt 6 — Veröffentlichen

Wenn alles gut aussieht, veröffentliche die Site:

SDK

const result = await client.sites.publish('site_abc123');
console.log(`✓ Site veröffentlicht: ${result.status}`);

MCP

Veröffentliche Site "site_abc123" in Produktion.

Was wird importiert?

Bestandteil	Importiert	Hinweise
Seitenstruktur	✓	Routen werden zu Seiten
Textinhalt	✓	Überschriften, Absätze, Listen
Bilder	✓	Kopiert in OptimoCMS Storage
Farben/Schriften	✓	Umgewandelt in Design Tokens
Formulare	Teilweise	Basisfelder werden übernommen
Animationen	✗	Müssen manuell nachgebaut werden
Custom Code	✗	JavaScript/React nicht importierbar

Tipps für eine reibungslose Migration

Screenshot machen — Mache einen Screenshot deiner Lovable-Site vor dem Import als Referenz
Erst auf Sandbox testen — Verwende einen Sandbox-API-Schlüssel zum Testen des Imports
Responsive prüfen — Überprüfe die importierten Seiten auf dem Handy
SEO bewahren — Richte Weiterleitungen ein, wenn du die Domain wechselst
Schritt für Schritt — Erst importieren, prüfen, anpassen, dann veröffentlichen

Nächste Schritte

Restaurantseite erstellen — Füge deiner importierten Site weitere Features hinzu
Design Tokens — Mehr über das Token-System
MCP Setup für Lovable — MCP aus Lovable verwenden

Import aus Lovable

On this page