Cómo desplegar Vue en Saplo (aplicación frontend ligera)

Vue 3, junto con React, es la segunda biblioteca más popular para crear interfaces y, al igual que React, no es un hosting por sí sola. El proyecto compilado (normalmente con Vite) genera archivos estáticos HTML, CSS y JS que necesitan un servidor con un fallback de rutas correcto para Vue Router en modo history. Sin él, actualizar una subpágina termina con un error 404. En Saplo, despliegas Vue igual que cualquier otra aplicación del catálogo: el motor compila el proyecto, publica el directorio dist bajo nginx y configura automáticamente el fallback de rutas.

Para quién es Vue en Saplo

Antes de iniciar la instalación, comprueba si es una buena opción para tu proyecto:

• estás creando un panel de administración - Saplo sirve el build listo como archivos estáticos, sin un proceso Node en segundo plano,
• el frontend se conecta con tu propia API - alojas una SPA junto al backend (Django, Node, Docker) en el mismo Box o por separado,
• una aplicación de una sola página con Vue Router en modo history - el fallback de todas las rutas en index.html está configurado automáticamente, no tienes que añadir nada en nginx,
• quieres hacer despliegues con git push en lugar de subir archivos manualmente por FTP - conectas el repositorio una vez y cada push a la rama de producción compila y despliega automáticamente la nueva versión.

Si el proyecto necesita renderizado en el servidor y un mejor SEO, comprueba en el catálogo de aplicaciones el stack de Nuxt en lugar de usar Vue sin más.

Requisitos

Para poner Vue en Saplo, necesitas:

• Box en cualquier plan, incluso S es suficiente - una SPA compilada es un conjunto de archivos estáticos, sin procesos que se mantengan en memoria después de la compilación,
• al menos 256 MB de RAM libre para el propio proceso de compilación y 2 GB de espacio en disco,
• un dominio o subdominio *.saploapp.pl incluido en el precio de cada plan,
• un repositorio Git si quieres despliegues automáticos (opcional al principio; también puedes cargar la aplicación como un archivo .zip desde el panel).

Instalación paso a paso

1. En el panel de Saplo, entra en Catálogo de aplicaciones y selecciona Vue.js (categoría "Aplicaciones").
2. Indica el Box y el nombre de la aplicación: a partir de este se genera el subdominio predeterminado <name>.saploapp.pl.
3. Selecciona la versión de Node.js para la compilación (18, 20 o 22, 20 por defecto) y confirma la instalación.
4. El motor genera el esqueleto de Vue mediante Vite (el equivalente a npm create vite -- --template vue), instala las dependencias y compila el proyecto, mientras que el contenido del directorio dist se coloca directamente en el directorio de la aplicación, servido por nginx.
5. Una vez finalizada la instalación, el dominio del paso 2 muestra el esqueleto inicial de Vite + Vue: a partir de ese momento, despliegas en él tu propio código.

Implementación de tu propio código con Git

1. En los detalles de la aplicación, busca la sección Git / CI-CD y haz clic en "Conectar GitHub", confirma la instalación de la aplicación "Saplo Deploy" y selecciona el repositorio del proyecto Vue.
2. En el directorio raíz del repositorio debe encontrarse el archivo saplo.yaml.
3. Haz commit y push del archivo saplo.yaml a la rama de producción (main por defecto).
4. Cada envío posterior de git push a esta rama compila el proyecto y sustituye el contenido del directorio dist en Box. Puedes ver el estado en la pestaña Despliegues.
5. Si la compilación falla, la versión anterior operativa permanece en su lugar: Saplo no la sustituye por una versión defectuosa.

Ejemplo de un archivo saplo.yaml mínimo para Vue:

name: my-project
stack: vue
build:
  install: npm ci
  command: npm run build
  output: dist

Vue en Saplo frente a las alternativas

Preguntas frecuentes

¿Vue Router en modo history funciona sin configuración adicional? Sí, el fallback de todas las rutas a index.html está activo justo después de la instalación, por lo que actualizar cualquier subpágina no termina en un error 404.

¿Puedo tener varias aplicaciones Vue en un mismo Box? Sí, el directorio de aplicaciones te permite desplegar varios módulos uno al lado del otro, cada uno con su propio subdominio o dominio.

Necesito SSR y mejor SEO, ¿qué elijo? El stack Nuxt del mismo directorio: Vue con renderizado completo en el servidor.

¿Incluye SSL y un dominio propio? Sí, el certificado SSL es automático y el dominio o subdominio *.saploapp.pl está incluido en el precio de cada plan.

¿Cómo cambio el directorio de salida del build si no uso el dist predeterminado? Establece el campo build.output en saplo.yaml con la ruta correcta.

Vue en Saplo lo despliegas desde cero hasta un dominio funcional en solo unos minutos, y el enrutado de Vue Router funciona sin configuración manual. Si el proyecto crece y necesita SSR, migrar a Nuxt en el mismo directorio no obliga a cambiar el hosting.