Guías de ImportaciónImportar desde Lovable

Cómo implementar tu proyecto Lovable.dev en la web con Zeabur

Esta guía es la forma más fácil de tomar el código generado por Lovable.dev y convertirlo en un sitio web real y en vivo que puedas compartir con amigos o clientes.

Descripción general

Lovable.dev es excelente para crear el diseño y las características de tu aplicación, pero para ponerlo en línea, necesitas “alojamiento”. Recomendamos encarecidamente Zeabur porque se encarga del trabajo técnico pesado por ti. Toma tu código y lo coloca en una URL activa en solo unos pocos clics.

El flujo de trabajo:

  • Crear: Genera tu aplicación en Lovable.dev.
  • Perfeccionar: Guarda el código en tu ordenador y verifica con Cursor.
  • Implementar: Alójalo en vivo en Zeabur.

📝 Nota importante: Esta guía se centra en poner tu sitio web en línea (el Frontend). Si tu aplicación necesita guardar datos de usuarios o inicios de sesión, eso requiere una base de datos. ¡Cubriremos cómo agregar una base de datos en un tutorial de seguimiento separado!

Requisitos previos

  • Una cuenta de GitHub.
  • Cursor instalado en tu ordenador.
  • Una cuenta de Zeabur.
  • Node.js instalado localmente (versión 18+ recomendada).

Descripción general de la migración

Este plan te lleva de un entorno “sin código” a un entorno “pro-código” mientras conservas la asistencia de IA que te encanta.

  • Fuente: Lovable (React + Vite + Tailwind).
  • Editor: Cursor / Windsurf / Antigravity
  • Host: Zeabur

Paso 1: Sincronizar Lovable con GitHub

En lugar de una exportación manual, Lovable tiene una integración de sincronización bidireccional directa que crea el repositorio por ti.

  1. Ubica la integración de GitHub:
    • Abre tu proyecto en el editor Lovable.
    • Mira el encabezado superior derecho (a la izquierda de los botones “Upgrade” y “Publish”).
    • Haz clic en el icono de GitHub (la silueta del gato). Sincronizar proyecto con Lovable
  2. Inicia la conexión:
    • Aparecerá un menú desplegable con el título “GitHub”.
    • Haz clic en el botón negro etiquetado como “Connect GitHub”. Haz clic en conectar github
  3. Vincula el proyecto:
    • Se abrirá una ventana modal de configuración titulada “Project Settings” o “Integrations”.
    • En la sección “Project” (donde dice Not connected), haz clic en el botón “Connect Project”.
    • Nota: Si no has iniciado sesión en GitHub a través de Lovable antes, es posible que te pida que autorices tu cuenta primero. Conectar proyecto con github
  4. Obtén la URL de tu repositorio:
    • Una vez finalizada la sincronización, aparecerá una notificación verde en la esquina inferior derecha: “A GitHub Repository is now under your account…”
    • Una ventana modal titulada “Clone” aparecerá en el centro de la pantalla.
    • Copia la URL que se muestra en el cuadro (se verá como https://github.com/yourusername/project-name.git). Crear exitosamente un nuevo repositorio github

Ya has terminado con Lovable. Tienes la URL necesaria para llevar el código a Cursor.

Paso 2: Configurar el entorno local (Cursor)

Ahora llevarás el código a tu ordenador local para editarlo con Cursor y configurar el entorno de desarrollo.

  1. Instala Cursor:

  2. Clona tu repositorio:

    • Abre Cursor.
    • Presiona Cmd + Shift + P (Mac) o Ctrl + Shift + P (Windows) para abrir la paleta de comandos.
    • Escribe Git: Clone y selecciónalo.
    • Pega la URL de tu repositorio de GitHub (p. ej., https://github.com/yourname/my-lovable-app) y selecciona una carpeta en tu ordenador para guardarlo.

    Alternativamente, a través de terminal:

    git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

  3. Instala dependencias:

    • Abre la terminal en Cursor (Ctrl + ~ o Terminal > New Terminal).
    • Los proyectos Lovable generalmente detectan el gestor de paquetes automáticamente. Busca un archivo de bloqueo (pnpm-lock.yaml, package-lock.json, o yarn.lock).
    # Si usas npm
npm install
# Si usas pnpm (común en Lovable)
pnpm install

  4. Configuración del entorno:

    • Ubica el archivo .env.example (si existe) y duplícalo para crear un archivo .env.
    • Importante: Si tu aplicación Lovable usaba claves de API (OpenAI, Supabase, etc.), debes agregar manualmente estas claves a tu archivo local .env. Lovable no exporta tus secretos a GitHub por razones de seguridad.

  5. Inicia el servidor local:

    • Ejecuta la aplicación localmente para asegurarte de que funciona:
    npm run dev
    • Haz clic en el enlace localhost en la terminal para ver tu aplicación.

Paso 3: Abrir en un editor local e instalar la extensión Zeabur

Descomprime el archivo y abre la carpeta del proyecto en un editor de código local como VS Code o Cursor. Para que la implementación sea increíblemente simple, usarás la extensión Zeabur.

  1. Ve al Marketplace de extensiones en tu editor.
  2. Busca “Zeabur” y haz clic en Install.

Descargar extensiones Zeabur.png

Paso 4: Implementar con un solo clic

Ahora viene la magia. Con la extensión instalada, implementar tu proyecto es solo cuestión de unos pocos clics.

  1. Haz clic en el nuevo icono de Zeabur en la barra de actividades de la izquierda.
  2. Haz clic en el botón “Deploy”.

Tu editor te pedirá permiso para abrir un enlace en tu navegador. Haz clic en “Open”.

Haz clic en Deploy y Open .png

Paso 5: Deja que el agente de IA de Zeabur haga el resto

Una vez que se te redirija a Zeabur, el agente de IA de la plataforma toma el control. Analiza tu código para entender la estructura del proyecto, las dependencias y los requisitos de compilación.

El agente de Zeabur hará lo siguiente:

  • Reconocer que tienes una aplicación full-stack (p. ej., un frontend React y un backend Express).
  • Configurar automáticamente los comandos de compilación e inicio.
  • Provisionar todos los servicios necesarios.

Agente Zeabur maneja el resto.png

Se te pedirá que selecciones un proyecto y una región de implementación. Después de eso, Zeabur se encarga de todo lo demás.

Puedes ver en tiempo real cómo se compila tu servicio y se vuelve completamente operativo. Zeabur incluso te proporciona un dominio en vivo tan pronto como la implementación sea exitosa.

Paso 6: Dominio y redes

  1. Haz clic en tu servicio en Zeabur.
  2. Navega a la pestaña Networking.
  3. Haz clic en Generate Domain (para obtener un dominio .zeabur.app) o Custom Domain para conectar el tuyo.
  4. Visita la URL. Tu aplicación Lovable es ahora una aplicación de producción completamente implementada.

Paso 7: Conectar una base de datos (Supabase)

Si tu aplicación Lovable permite que los usuarios inicien sesión, creen cuentas o guarden datos, requiere una base de datos (generalmente Supabase).

Actualmente, has implementado exitosamente el Frontend (la interfaz visual). Para que las características de datos y autenticación funcionen, debes conectar el backend agregando tus claves de API a la configuración Variable de Zeabur.

Tenemos una guía dedicada para guiarte a través de la obtención de tus claves de Supabase y agregarlas a Zeabur:

👉 Sigue la guía paso a paso para crear y conectar Supabase en Zeabur.

¡Eso es todo! Has movido exitosamente tu proyecto de un prototipo en Lovable.dev a una aplicación lista para producción y en vivo en Zeabur sin escribir una sola línea de configuración. Este flujo de trabajo perfecto te permite concentrarte en lo que más importa: crear excelente software.

Importar desde ReplitImportar desde Bolt