Migrar una app de Lovable a un hosting Node.js

Lovable se ha convertido en una de las principales herramientas para crear aplicaciones y sitios web utilizando la IA.

Con Lovable podemos crear aplicaciones con frontend y backend simplemente chateando con una interfaz que, basándose en nuestras necesidades, diseñará y construirá todo.

Lovable crea las aplicaciones y sitios web utilizando Javascript / Typescript, utilizando Vite, React y Supabase como parte del stack tecnológico.

Aunque las aplicaciones creadas con Lovable se pueden quedar alojadas en los propios servidores de Lovable, también las puedes alojar en tu propio hosting, como en el hosting NodeJS de Raiola Networks.

En este artículo te vamos a enseñar cómo hacerlo, pero para que lo tengas en cuenta, Lovable no permite una exportación directa para poder subir el sitio web o aplicación generada con Inteligencia Artificial a un hosting, por lo que debemos utilizar Github como puente.

Lovable es compatible con Github como nuestros hostings, por esa razón lo usamos como puenten para transferir la aplicación de Lovable a nuestros servidores.

Transferir el proyecto de Lovable a Github

Empezamos en la interfaz de Lovable con nuestra aplicación ya desarrollada.

Una vez que tenemos una primera versión finalizada de nuestra aplicación web o sitio web creado con Lovable, vamos a dirigirnos al botón de Github que hemos marcado en rojo en la imagen anterior (está arriba a la derecha).

Esto hará que nos aparezca un popup similar a este:

Lo que tendremos que hacer es pulsar el botón "Connect Github" y esto nos abrirá otro popup donde podremos conectar nuestro proyecto creado con Lovable en nuestra cuenta de Github que debemos tener previamente.

En este caso, en la captura anterior en "Connected Account" ya puedes ver la cuenta conectada. Si no tienes ninguna cuenta conectada, te permitirá conectar una.

Si no tienes cuenta de Github, lo primero será crear una cuenta gratuitamente desde aquí: https://github.com/login

Una vez conectada la cuenta de Github a Lovable, podrás conectar el proyecto para que se transfiera automáticamente en Github.

Ten en cuenta que la transferencia es bidireccional, es decir, si cambias algo en el código guardado en Github el cambio también se reflejará en el proyecto en Lovable.

Antes de transferir el proyecto a Github, nos aparecerá un mensaje similar a este que podemos ver en la siguiente captura:

Pulsamos el botón  "Transfer anyway" para confirmar que hemos entendido lo que nos sale, que es principalmente lo que hemos comentado hace un par de líneas relacionado con que la sincronización es bidireccional.

Ahora tu proyecto de Lovable estará en tu cuenta de Github y aparecerá esta ventana:

Es importante lo que ves en la pantalla anterior, ya que sale la URL o ruta que tienes que utilizar para clonar tu proyecto desde tu hosting Node.js de Raiola Networks.

Después de esto, en nuestra cuenta de Github podremos ver que se ha creado un nuevo repositorio con el nombre de la aplicación creada con Lovable:

No te preocupes, de forma nativa el repositorio se crea en modo "Privado", por lo que nadie verá tu proyecto a no ser que cambies el proyecto a modo público.

Una vez que estamos en este punto, vamos a entrar al repositorio que acabamos de crear al transferir el proyecto desde Lovable:

Ahora ya podemos transferir el proyecto desde Github a un plan de hosting Node.js de Raiola Networks.

Transferir el proyecto de Github al Hosting Node.js

Para transferir el proyecto de Github al hosting Node.js que tienes contratado en Raiola Networks simplemente debemos configurar Git en tu hosting.

Empezamos dando por hecho que ya tienes contratado un hosting Node.js y que estás dentro del panel de control cPanel.

Ahora debemos buscar el icono "Control de versión de Git":

Entramos en "Control de version de Git" y podremos ver algo similar a esto:

Pulsamos sobre el botón "Crear" marcado en la captura de pantalla anterior en rojo.

Con esto podremos ver una interfaz similar a esta de la siguiente captura:

Los datos que debes rellenar aquí son:

• Evidentemente, dejamos marcado el checkbox "Clonar un repositorio" para clonar el repo de Github.
• En "Clonar URL" debemos poner la URL que nos aparecía en Lovable al transferir el proyecto a Github. No te preocupes, abajo te dejo una captura de pantalla para recordártelo.
• En "Ruta del repositorio" podemos poner la ruta que tú quieras, aquí va a depender de si vamos a utilizar el dominio principal o no. Vamos a dar por hecho que no, ya que es un poco más complejo, aunque también lo vamos a explicar. Te recomiendo una ruta en la raíz del hosting, tal y como lo hemos hecho en la captura anterior.
• En "Nombre del repositorio" puedes ponerle el que tú quieras, solo es identificativo.

En cuanto a la URL que tienes que poner en "Clonar URL" debes marcar "SSH" y te saldrá una ruta similar a esta:

Pulsamos "Crear" y nos aparecerá este mensaje:

Esto es normal, ya que nuestro repositorio está configurado como privado y el servidor del hosting Node.js no puede acceder sin autenticación específica en Github.

Para obtener permiso específico, debemos entrar a la terminal SSH y conectarnos a nuestro plan de hosting.

Por si no sabes de qué te hablo, este proceso está explicado aquí, ya que es el mismo para un hosting Elástico que en un hosting Node.js: https://raiolanetworks.com/ayuda/acceder-ssh-hosting-elastico/

Recuerda que en nuestros hostings con cPanel permiten acceso SSH y está disponible en el puerto 11022 en lugar de en el 22. Esto tendras que configurarlo especificamente en el cliente SSH.

Una vez que estamos dentro, debemos ejecutar el siguiente comando. Evidentemente, debes cambiar el email de ejemplo y poner el email de tu cuenta de Github:

 ssh-keygen -t rsa -b 4096 -C "email@ejemplo.com"

Al ejecutar el comando, te va a ir preguntando una serie de cosas. Realmente no tienes que contestar a nada, es todo pulsar "ENTER" hasta que se genere la clave.

NOTA: He tenido que borrar algunas partes de la captura anterior y de la siguiente por temas de seguridad.

Ahora ejecutamos el siguiente comando para ver la clave SSH generada:

cat ~/.ssh/id_rsa.pub

Con esto podremos ver la clave SSH generada que debemos copiar para llevarla a nuestra cuenta de Github:

Debemos copiar todo el bloque marcado en rojo en la imagen anterior, desde que empieza por "ssh-rsa AAAA...." hasta que acaba por el email que hayas metido tú en el comando al generar la clave SSH.

Una vez copiado, seleccionándolo en la terminal y haciendo clic derecho (sé que es diferente a otros contextos y parece que no hemos copiado nada, pero sí que lo hemos copiado), nos vamos al repositorio en nuestra cuenta de Github y volvemos a entrar a "Settings":

Debemos pulsar en "Deploy keys" marcado en rojo en la captura de pantalla anterior.

Eso nos llevará a esta pantalla.

Pulsamos sobre el botón "Add deploy key" marcado en rojo en la captura de pantalla anterior y podremos ver esta pantalla:

El "Title" es simplemente un nombre identificativo, pero en "Key" debemos insertar la SSH Key que hemos generado anteriormente mediante SSH en el hosting Node.js.

Cuando tengamos todo rellenado, pulsamos el boton "Add key", el botón marcado en rojo en la imagen anterior.

Ahora podremos irnos otra vez a este paso dentro de cPanel.

Y al pulsar el botón "Crear" ya comenzará el proceso de clonación del repositorio de Github. El tiempo que puede tardar siempre va a depender del tamaño del proyecto, pero en un par de segundos debería estar sincronizado.

Instalar dependencias y compilar estáticos en Node.js

Como ya hemos comentado, las aplicaciones creadas con Lovable están creadas con Javascript, y por eso debemos ejecutar un par de comandos en el hosting antes de poder cargar el sitio web.

Debemos ir a la terminal SSH otra vez y dirigirnos a la carpeta donde hemos clonado el proyecto. Debes utilizar el siguiente comando, pero adaptándolo al nombre de la carpeta donde has guardado el proyecto:

cd raiola-network-showcase

En primer lugar, ejecutamos esto para forzar a utilizar la última o una de las últimas versiones de Node.js:

export PATH="/opt/alt/alt-nodejs22/root/bin:$PATH"

Ahora debemos ejecutar el siguiente comando para instalar las dependencias de NodeJS con el gestor de paquetes NPM.

npm install

Ahora vamos a compilar los estáticos del proyecto con Node.js, para ello vamos a ejecutar el siguiente comando en la terminal:

npm run build

Te dejo aquí una captura de la ejecución secuencia de estos tres comandos para que veas cómo debería quedar si todo va bien.

Ahora, si vamos al File Manager de cPanel podremos ver que se nos ha creado una carpeta llamada "dist":

Debes tener en cuenta que debes realizar este proceso cada vez que hagas cambios en tu aplicación en Lovable, dandole tiempo para sincronizar los cambios en Github y posteriormente que se sincronicen en el hosting Node.js.
Después, debes ejecutar los tres comandos para regenerar el contenido de la carpeta "dist".

Esta carpeta es la que contiene nuestra aplicación o sitio web ya preparada para funcionar, por lo que debemos apuntar el dominio o subdominio correspondiente a esta carpeta.

Conectar el dominio o subdominio al proyecto clonado

Ahora es importante tener en cuenta que el proceso va a variar dependiendo de si queremos que nuestro proyecto cargue en el dominio principal del hosting o en uno adicional o subdominio.

Mi recomendación es que lo hagas en uno adicional o subdominio, ya que la configuración es bastante más fácil, y lo más importante, más segura.

Si quieres ver cómo añadir un nuevo dominio o un subdominio a tu cuenta de hosting con cPanel, sigue este manual: https://raiolanetworks.com/blog/anadir-dominio-subdominio-cpanel/

Evidentemente, cuando apuntamos un dominio o subdominio a nuestro hosting, este debe estar apuntando con un registro A a la IP del servidor.
El proceso aquí va a variar dependiendo de si utilizas un DNS externo o si las DNS las gestionan nuestros servidores DNS de Raiola Networks.

En este caso, vamos a hacer el proceso dando por hecho que has apuntado el subdominio que vas a utilizar a nuestras DNS.

• dns1.raiolanetworks.es
• dns2.raiolanetworks.es
• dns3.raiolanetworks.es

Una vez apuntado, nos vamos a ir a cPanel y buscamos el icono "Dominios", el que puedes ver en la siguiente captura de pantalla:

Entramos y vamos a añadir en este caso el subdominio llamado "ejemplo.singletechhub.com", pero el proceso sería exactamente el mismo para cualquier dominio o subdominio que quieras añadir a tu cuenta de hosting. Debemos pulsar sobre el botón "Crear un dominio" que puedes ver en la siguiente captura de pantalla marcado en rojo:

Al hacer esto, nos aparecerá un formulario como este, donde debemos rellenar con el nuevo dominio o subdominio y configurar a qué carpeta queremos que apunte (esto es muy importante):

Es muy importante que el dominio nuevo o subdominio nuevo apunte a la carpeta "dist" donde está el resultado del proyecto con todo lo necesario para funcionar.

Puedes sacar la ruta directamente del File Manager de cPanel situándote en la carpeta del proyecto (donde se ha clonado el repositorio de Github) como puedes ver en la siguiente captura de pantalla:

Finalmente, en el formulario que has podido ver antes, pulsamos "Enviar" para crear el nuevo dominio o nuevo subdominio apuntando a la carpeta "dist" del proyecto.

Y con esto, ya tendremos nuestro proyecto Lovable funcionando en nuestro hosting NodeJS de Raiola Networks.

Puede que al principio nos salga algo como esto:

O incluso también es posible que el certificado SSL gratuito tarde un par de minutos en generarse, pero no te preocupes, es cuestión de tiempo que puedas ver tu proyecto funcionando.

Si tienes cualquier duda o pregunta relacionada con nuestro hosting para Node.js, puedes contactar con nuestro departamento comercial sin compromiso y te solventaremos todas las dudas que tengas.