Cómo publicar su aplicación de Lovable, Bolt u otro creador con IA en su hosting de WebOké

¿Ha creado una aplicación con Lovable, Bolt u otro creador con IA y desea publicarla en su propio dominio en WebOké? Es posible. En este artículo se explica cómo obtener el código del creador con IA, cómo compilar y subir la aplicación, y cómo GitHub puede hacerlo automáticamente por usted.

1. ¿Qué tipo de aplicación tiene?

Abra el archivo package.json de su proyecto. En él puede ver de qué tipo de aplicación se trata.

• Una aplicación estática (React con Vite). En package.json aparece vite y ningún framework de servidor. Con npm run build se genera una carpeta dist con archivos HTML, JavaScript y CSS normales. Esos archivos se suben a public_html. Esto funciona en cualquier plan de hosting. Muchas aplicaciones de Bolt y las aplicaciones más antiguas de Lovable están creadas así.
• Una aplicación con su propio servidor. Desde el 13 de mayo de 2026, Lovable crea aplicaciones con TanStack Start: en ese caso aparece @tanstack/react-start en package.json. Una aplicación así ejecuta código de servidor, por lo que no funciona como archivos sueltos en public_html. Debe configurarla como aplicación Node.js (consulte el punto 6). Lo mismo se aplica a otras aplicaciones con servidor propio, como un backend de Express.
• Una aplicación con Supabase o Lovable Cloud como backend. La base de datos, el inicio de sesión y las funciones permanecen en Supabase o Lovable. En WebOké solo se publica la parte visible (el front-end). Al compilar, sí debe indicar la dirección y la clave pública de Supabase (consulte el punto 5).

2. Obtener el código del creador con IA a través de GitHub

Lovable y Bolt pueden guardar su proyecto en un repositorio propio de GitHub. Los cambios se sincronizan en ambos sentidos: lo que modifique en el creador con IA llega a GitHub, y lo que modifique en GitHub vuelve al creador con IA.

En Lovable:

1. Abra su proyecto y vaya a Project settings > Git > GitHub.
2. Haga clic en Add connection y conceda a la aplicación de Lovable acceso a su cuenta de GitHub.
3. En Accounts, haga clic en Connect. Lovable crea un repositorio privado y lo mantiene actualizado.

También es posible sin GitHub: con Download codebase en Project settings > Git puede descargar el código (con una suscripción de pago de Lovable).

En Bolt:

1. Abra su proyecto y haga clic en el icono de GitHub, arriba a la derecha.
2. Inicie sesión en GitHub, haga clic en Authorize e instale la aplicación de GitHub de Bolt.
3. Introduzca un nombre para el repositorio y haga clic en Create repository. A partir de ese momento, Bolt trabaja en la rama main.

3. Compilar y subir una aplicación estática

La aplicación se compila en su propio ordenador. Para ello necesita Node.js, versión 22 (la versión actual de Vite requiere como mínimo la 20.19 o la 22.12).

1. Obtenga el código: haga un git clone de su repositorio o descomprima la descarga.
2. Abra un terminal en la carpeta del proyecto e instale los paquetes con npm ci (o npm install si no existe un package-lock.json).
3. Compile la aplicación con npm run build. Ahora tendrá una carpeta dist con un index.html y una carpeta assets.
4. Suba el contenido de dist a domains/sudominio.es/public_html, con un programa FTP o con el Administrador de archivos (File Manager) de DirectAdmin. Por tanto, no suba la carpeta dist en sí, ni el código fuente ni node_modules.
5. Coloque el archivo .htaccess que encontrará a continuación en public_html.

Una aplicación con varias páginas (un router) muestra en el navegador direcciones como sudominio.es/sobre-nosotros. Esas páginas no existen como archivo en el servidor. Si recarga una de esas páginas o abre el enlace directamente, obtendrá un error 404. Con este archivo .htaccess, el servidor redirige esas direcciones a index.html y la aplicación muestra la página correcta:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^assets/ - [R=404,L]
RewriteRule ^ index.html [L]

El servidor muestra normalmente los archivos y carpetas existentes. Un archivo que falte en assets devuelve un 404 real, de modo que detectará los errores con más facilidad. Todo lo demás se dirige a la aplicación.

4. Colocar la aplicación en una subcarpeta

¿Desea publicar la aplicación no en sudominio.es, sino en sudominio.es/app? En ese caso, la aplicación debe saberlo ya al compilarse. De lo contrario, el navegador buscará los archivos en /assets en lugar de en /app/assets y la pantalla se quedará en blanco.

1. En vite.config.js (o vite.config.ts), configure la opción base: '/app/'.
2. Indique la misma ruta al router. En React Router se hace con <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Vuelva a compilar y suba el contenido de dist a public_html/app.
4. Coloque en public_html/app/.htaccess el mismo archivo que el anterior, con RewriteBase /app/.

5. Supabase, Lovable Cloud y otros ajustes (variables de entorno)

Vite incluye en los archivos JavaScript, durante la compilación, los ajustes que empiezan por VITE_, como VITE_SUPABASE_URL y VITE_SUPABASE_PUBLISHABLE_KEY (en proyectos más antiguos, VITE_SUPABASE_ANON_KEY). Una vez compilada la app, ya no es posible configurarlos en el servidor.

• Encontrará los valores en el archivo .env de su proyecto. Copie los nombres exactamente igual.
• Si su proyecto no contiene un archivo .env, créelo usted mismo en la carpeta del proyecto antes de ejecutar npm run build. Con GitHub Actions, configúrelos como secret (consulte el punto 7).
• Si ha modificado algún valor, vuelva a compilar y a subir la app.

6. Una app con servidor propio: como app de Node.js

Una app con código de servidor, como una app de TanStack Start creada con Lovable, se configura con Setup Node.js App en DirectAdmin. Puede leer cómo funciona en Activar Node.js en DirectAdmin. Para una app de TanStack Start, el proceso es el siguiente:

1. Compile la app en su ordenador con NITRO_PRESET=node-server npm run build. Se creará una carpeta .output.
2. Cree una app en Setup Node.js App, con Node.js 22 y una carpeta fuera de public_html, por ejemplo apps/miapp.
3. Suba la carpeta .output a esa carpeta.
4. Cree en la misma carpeta un archivo start.cjs con esta única línea e indique start.cjs en Application startup file:

   import('./.output/server/index.mjs');

5. Configure los ajustes que necesita el servidor, como SUPABASE_URL y SUPABASE_PUBLISHABLE_KEY, en Environment variables.
6. Haga clic en Restart. Hágalo también después de cada nueva subida.

El pequeño archivo start.cjs es necesario porque el servidor de .output es un módulo JavaScript moderno (.mjs) y el entorno de Node.js carga el archivo de inicio de la manera antigua. Si la app devuelve un error 503, consulte stderr.log en la carpeta de su app.

7. Despliegue automático con GitHub Actions

Con GitHub Actions, GitHub compila su app con cada cambio en la rama main y sube el resultado a su paquete. Como Lovable y Bolt escriben en GitHub, un cambio realizado en el creador de IA estará online en pocos minutos. La función Git de DirectAdmin no compila nada, solo coloca los archivos; por eso, para una app de Vite, GitHub Actions resulta más práctico.

Las contraseñas y claves nunca deben guardarse en su repositorio, sino como secret en GitHub:

1. Abra su repositorio en GitHub y vaya a Settings > Secrets and variables > Actions.
2. Haga clic en New repository secret, introduzca el nombre y el valor y haga clic en Add secret. Repita esto para cada secret de la variante que elija.
3. Cree en su repositorio el archivo .github/workflows/deploy.yml con uno de los dos ejemplos que se muestran a continuación.
4. Tras el siguiente cambio, compruebe en la pestaña Actions si todo ha funcionado. Con Run workflow también puede iniciarlo manualmente.

Variante A: mediante FTPS (todos los paquetes de hosting). Cree en DirectAdmin una cuenta FTP independiente para GitHub y, en Root Directory, seleccione la opción Domain (consulte ¿Cómo funciona FTP en WebOké?). Secrets: FTP_SERVER (el nombre del servidor de su paquete, como linux2023.webawere.nl, no su nombre de dominio), FTP_USERNAME (el nombre completo, como github@sudominio.nl), FTP_PASSWORD y los valores VITE_ de su app.

name: Build and deploy

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
      - uses: SamKirkland/FTP-Deploy-Action@v4.4.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          protocol: ftps
          port: 21
          local-dir: ./dist/
          server-dir: public_html/

Variante B: mediante SSH con rsync (paquetes con SSH). SSH está incluido en Power Webhost Three y Four, AI Wordpress Three y Power Reseller, en el puerto 1967 y solo con clave (consulte Acceso SSH y la Terminal en DirectAdmin).

1. Cree en su ordenador una clave independiente para GitHub, sin contraseña: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Pegue el contenido de github-deploy.pub en DirectAdmin, en SSH Keys > PASTE KEY.
3. Pegue el contenido de github-deploy (la clave privada) en el secret SSH_PRIVATE_KEY. Después, elimine el archivo de su ordenador.
4. Ejecute ssh-keyscan -p 1967 linux2023.webawere.nl y guarde el resultado en el secret SSH_KNOWN_HOSTS. Así GitHub comprueba que realmente se conecta a su servidor.
5. Añada también como secret SSH_HOST (el nombre del servidor), SSH_USER (su nombre de usuario de DirectAdmin), DOMEIN (como sudominio.nl) y los valores VITE_.

name: Build and deploy

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
      - name: Deploy
        env:
          SSH_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          SSH_KNOWN_HOSTS: ${{ secrets.SSH_KNOWN_HOSTS }}
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_USER: ${{ secrets.SSH_USER }}
          DOMEIN: ${{ secrets.DOMEIN }}
        run: |
          mkdir -p ~/.ssh
          printf '%s\n' "$SSH_KEY" > ~/.ssh/deploy_key
          chmod 600 ~/.ssh/deploy_key
          printf '%s\n' "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
          rsync -rlptz --delete --exclude=.well-known --exclude=cgi-bin \
            -e "ssh -p 1967 -i ~/.ssh/deploy_key" \
            dist/ "$SSH_USER@$SSH_HOST:domains/$DOMEIN/public_html/"

Si no utiliza Supabase, elimine las líneas con VITE_SUPABASE o sustitúyalas por las variables VITE_ de su propia app. Si el inicio de sesión falla varias veces, el servidor bloquea temporalmente la dirección IP de GitHub. En ese caso, revise sus secrets y vuelva a iniciar el workflow.

8. Errores frecuentes

• La página de inicio funciona, pero al recargar o al abrir un enlace directo aparece un error 404. Falta el archivo .htaccess del punto 3 o se encuentra en la carpeta equivocada.
• Una pantalla en blanco. Abra las herramientas para desarrolladores de su navegador (F12) y consulte Console o Network. ¿Ve errores 404 en archivos de /assets? Entonces la ruta no es correcta: ha subido la propia carpeta dist en lugar de su contenido, o la aplicación está en una subcarpeta sin el base correcto (punto 4).
• La aplicación se carga, pero el inicio de sesión o los datos no funcionan, o ve un mensaje como supabaseUrl is required. Las variables VITE_ no estaban disponibles durante la compilación. Defínalas en .env o como secret y vuelva a compilar.
• La compilación falla con un mensaje sobre la versión de Node.js. Utilice Node.js 22, tanto en su ordenador como en el workflow (node-version: 22).
• npm ci falla. No hay ningún package-lock.json, por ejemplo porque el proyecto solo tiene un bun.lock. Ejecute npm install una vez y añada el nuevo package-lock.json a su repositorio.
• No hay ningún index.html en la compilación. En ese caso se trata de una aplicación con su propio servidor, como TanStack Start. Configúrela como aplicación Node.js (punto 6).

Véase también: Conectar con FileZilla (FTP, FTPS y SFTP) y Claves SSH e inicio de sesión con SSH.

Explicación detallada con capturas de pantalla: Configurar una aplicación Node.js en el manual de DirectAdmin.