OptimoCMSDocs
Guides

Importer depuis Lovable

Migrez votre projet Lovable vers OptimoCMS. Importez le contenu, les images et les design tokens tout en préservant votre design.

Importer depuis Lovable

Vous avez construit un site web dans Lovable et souhaitez le transférer vers OptimoCMS pour plus de contrôle, d'accès API et de scalabilité ? Ce tutoriel vous guide à travers le processus de migration complet.

Dans ce tutoriel :

  • Connecter un projet Lovable via le SDK et MCP
  • Importer le contenu et les images
  • Reprendre les design tokens de votre design Lovable
  • Ajustements manuels après l'import

Prérequis

  • Node.js 18+
  • npm install @optimocms/sdk
  • L'URL publique de votre projet Lovable (ex : https://mon-projet.lovable.app)
  • Une clé API OptimoCMS

Étape 1 — Préparer votre projet Lovable

Avant l'import :

  1. Publiez votre projet Lovable — Assurez-vous que le site est en ligne sur une URL .lovable.app
  2. Notez vos choix de design — Couleurs, polices et border-radius que vous souhaitez conserver
  3. Vérifiez les images — Toutes les images doivent être publiquement accessibles

Étape 2 — Lancer l'import via SDK

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://mon-restaurant.lovable.app',
  name: 'Mon Restaurant (depuis Lovable)',
});

console.log(`Import lancé : ${importResult.importId}`);
console.log(`Statut : ${importResult.status}`);
console.log(`Progression : ${importResult.progress}%`);

MCP (Cursor / Claude)

Dans Cursor ou Claude Desktop :

Importez le projet Lovable sur https://mon-restaurant.lovable.app vers mon site OptimoCMS "site_abc123". Nommez-le "Mon Restaurant (depuis Lovable)".

L'outil MCP import_from_lovable est appelé.

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://mon-restaurant.lovable.app",
    "name": "Mon Restaurant (depuis Lovable)",
    "includeImages": true,
    "includeStyles": true,
    "source": "lovable"
  }'

Étape 3 — Surveiller le statut de l'import

L'import s'exécute de manière asynchrone. Interrogez le statut jusqu'à ce qu'il soit terminé :

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(`Progression de l'import : ${status.progress}% (${status.pagesImported} pages)`);
    await new Promise(resolve => setTimeout(resolve, 2000));
    status = await client.import.status(siteId, importId);
  }

  if (status.status === 'completed') {
    console.log(`✓ Import terminé ! ${status.pagesImported} pages importées`);
  } else {
    console.error(`✗ Import échoué : ${status.error}`);
  }
}

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

Étape 4 — Reprendre les design tokens

Après l'import, vous pouvez ajuster les design tokens :

SDK

const site = await client.sites.get('site_abc123');
console.log('Tokens détectés :', 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 ajustés');

Étape 5 — Vérifier et ajuster le contenu

Après l'import, vérifiez les pages importées :

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

Étape 6 — Publier

Quand tout est bon, publiez le site :

SDK

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

MCP

Publiez le site "site_abc123" en production.

Qu'est-ce qui est importé ?

ComposantImportéNotes
Structure des pages✓Les routes deviennent des pages
Contenu texte✓Titres, paragraphes, listes
Images✓Copiées dans OptimoCMS Storage
Couleurs/polices✓Converties en design tokens
FormulairesPartielLes champs de base sont repris
Animations✗Doivent être reconstruites manuellement
Code personnalisé✗JavaScript/React non importable

Conseils pour une migration réussie

  1. Faites une capture d'écran de votre site Lovable avant l'import, comme référence
  2. Testez d'abord sur le sandbox — utilisez une clé API sandbox pour tester l'import
  3. Vérifiez le responsive — Contrôlez les pages importées sur mobile
  4. Préservez le SEO — Configurez des redirections si vous changez de domaine
  5. Étape par étape — Importez d'abord, vérifiez, ajustez, puis publiez

Prochaines étapes

Pipeline CI/CD

Automatisez les mises à jour de contenu et la publication avec GitHub Actions et le SDK OptimoCMS. Du staging à la production en un seul push.

Concepts

Architecture et décisions de conception derrière OptimoCMS.

On this page

Importer depuis LovablePrérequisÉtape 1 — Préparer votre projet LovableÉtape 2 — Lancer l'import via SDKSDKMCP (Cursor / Claude)RESTÉtape 3 — Surveiller le statut de l'importSDKÉtape 4 — Reprendre les design tokensSDKÉtape 5 — Vérifier et ajuster le contenuÉtape 6 — PublierSDKMCPQu'est-ce qui est importé ?Conseils pour une migration réussieProchaines étapes