Cómo desplegar Svelte (SPA sencilla) en Saplo

Svelte compila los componentes a JavaScript puro ya en el momento de la construcción, sin un DOM virtual cargado en el navegador, por lo que el paquete resultante es uno de los más pequeños entre los frameworks populares. En la variante SPA "plain" (sin SSR, sin el framework SvelteKit), Svelte es construido por Vite en un puñado de archivos estáticos HTML, CSS y JS, exactamente igual que React o Vue. En Saplo, Svelte (SPA "plain") se configura de forma idéntica a cualquier otra aplicación del catálogo: el motor "scaffoldea" el proyecto, lo construye con Vite y expone el directorio dist listo para Nginx, sin ningún proceso de Node ejecutándose en segundo plano después de la construcción.

Para quién es Svelte (SPA sencilla) en Saplo

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

• Si estás creando un panel de control o un dashboard para clientes, Saplo te ofrece un build listo como archivos estáticos, sin un proceso de Node propio ejecutándose en segundo plano.
• Si tu frontend necesita conectarse a tu propia API, puedes poner la SPA junto al backend (Django, Node, Docker) en el mismo Box o por separado.
• Si te importa que el bundle sea lo más pequeño posible, el compilador de Svelte elimina el framework del código resultante, por lo que la página se inicia más rápido que con bibliotecas basadas en un DOM virtual.
• Si el proyecto no necesita renderizado del lado del servidor, si necesitas SSR y un mejor SEO, en el mismo directorio encontrarás SvelteKit.
• Si quieres implementaciones con git push en lugar de transferir archivos manualmente por FTP, conectas el repositorio una vez y cada push a la rama de producción construye e implementa una nueva versión automáticamente.

Si el proyecto necesita renderizado del lado del servidor, enrutamiento basado en archivos o un mejor SEO de forma predeterminada, consulta el stack SvelteKit en el catálogo de aplicaciones en lugar de Svelte puro.

Requisitos

Para instalar Svelte (SPA simple) en Saplo, necesitas:

• Un Box de cualquier plan, incluso el S es suficiente. Un SPA construido es un puñado de archivos estáticos, sin un proceso mantenido en memoria después de la construcción.
• Un mínimo de 256 MB de RAM libre para el proceso de construcció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 para empezar, también puedes subir la aplicación como archivo .zip a través del panel).

Instalación paso a paso

1. En el panel de Saplo, ve a Catálogo de aplicaciones y selecciona Svelte (categoría "Aplicaciones", descripción "Frontend SPA ligero").
2. Indica el Box y el nombre de la aplicación; de ahí se creará la subdominio predeterminado <name>.saploapp.pl.
3. Selecciona la versión de Node.js para la compilación (18, 20 o 22, por defecto 20) y confirma la instalación.
4. El motor de scaffold construye el esqueleto de Svelte a través de Vite (equivalente a npm create vite -- --template svelte), instala las dependencias y compila el proyecto, y el contenido del directorio dist se dirige directamente al 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 + Svelte; a partir de este momento, puedes desplegar tu propio código en él.

Despliega 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 con tu proyecto Svelte.
2. El archivo saplo.yaml debe estar en el directorio raíz del repositorio.
3. Confirma (commit) y envía (push) el archivo saplo.yaml a la rama de producción (por defecto main).
4. Cada git push posterior a esa rama construye el proyecto y reemplaza el contenido del directorio dist en el Box. Puedes ver el estado en la pestaña Despliegues.
5. Si la construcción falla, la versión anterior y funcional permanece en su lugar: Saplo no la reemplaza con una versión defectuosa.

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

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

Svelte (SPA plano) en Saplo vs. alternativas

Preguntas frecuentes

¿En qué se diferencia Svelte (plain SPA) de SvelteKit en el catálogo de Saplo? Plain SPA son archivos estáticos sin SSR y sin un proceso Node en segundo plano, construidos solo con Vite. SvelteKit es un framework completo con SSR opcional, que se ejecuta en Saplo como un proceso de larga duración con reinicio automático.

¿Puedo tener varias aplicaciones Svelte en el mismo Box? Sí, el catálogo de aplicaciones te permite implementar múltiples módulos uno al lado del otro, cada uno con su propia subdominio o dominio.

Necesito SSR y mejor SEO, ¿qué debo elegir? El stack SvelteKit del mismo catálogo: es Svelte con renderizado completo del lado del servidor.

¿Obtendré 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 de la compilación si no uso el predeterminado dist? Configura el campo build.output en saplo.yaml a la ruta correcta.

Svelte (plain SPA) en Saplo se configura desde cero hasta un dominio funcional en cuestión de minutos, y el paquete resultante es uno de los más ligeros entre los stacks disponibles. Si el proyecto crece hasta necesitar SSR, la migración a SvelteKit en el mismo catálogo no requiere cambiar de hosting.