Cómo instalar React en Saplo (SPA y dashboard sin backend)

Hoy en día, React es la elección estándar para construir interfaces, pero React en sí mismo no es un hosting, es una librería para UI. Un proyecto construido (la mayoría de las veces con Vite) es un puñado de archivos estáticos HTML, CSS y JS que deben alojarse en algún lugar con un enrutamiento SPA adecuado (fallback de todas las rutas a index.html) y sin procesos innecesarios en segundo plano. Un hosting compartido normal te obliga a subir los archivos manualmente por FTP y no maneja el fallback de rutas, y las plataformas de pago te cobran por cada solicitud y por la compilación. En Saplo, instalas React como cualquier otra aplicación del catálogo: el motor construye el proyecto, expone el directorio dist bajo nginx y se encarga del redireccionamiento de rutas.

Para quién es React en Saplo

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

• si estás creando un panel de administración o un dashboard para clientes - Saplo sirve la compilación final como archivos estáticos, sin un servidor Node propio mantenido en memoria,
• si el frontend tiene que conectarse a tu propia API - instalas SPA junto al backend (Django, Node, Docker) en el mismo Box o por separado, e introduces la dirección de la API como variable de entorno de la compilación,
• si el proyecto no necesita renderizado del lado del servidor - si te preocupa el SEO y el SSR, consulta en el catálogo de aplicaciones la pila Next.js en lugar de React puro,
• si quieres implementaciones con git push en lugar de subir archivos manualmente por FTP - conectas el repositorio una vez, cada push a la rama de producción construye e implementa una nueva versión automáticamente.

Requisitos

Para instalar React en Saplo, necesitas:

• Un Box en cualquier plan, incluso el S es suficiente: una SPA construida es un puñado de archivos estáticos; después de la compilación, no queda ningún proceso Node en memoria, por lo que el consumo de RAM después de la instalación disminuye prácticamente a cero.
• Un mínimo de 256 MB de RAM libre para el proceso de compilación (Vite compila el proyecto una vez, durante la instalación y con cada git push posterior) y 2 GB de espacio en disco.
• Un Dominio o subdominio *.saploapp.pl incluido en el precio de cada plan, donde se alojará la aplicación.
• Un repositorio Git, si quieres utilizar la implementación automática (opcional para empezar, también puedes subir la aplicación como un archivo .zip a través del panel).

Instalación paso a paso

1. En el panel de control de Saplo, ve a Catálogo de aplicaciones y selecciona React (categoría "Aplicaciones").
2. Indica el Box y el nombre de la aplicación; a partir de este último se generará el subdominio predeterminado <name>.saploapp.pl.
3. Elige 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 crea el esqueleto de React a través de Vite (equivalente a npm create vite -- --template react), instala las dependencias y construye el proyecto, y el contenido del directorio dist se copia directamente al directorio de la aplicación, servido por nginx.
5. Una vez finalizada la instalación, el dominio del paso 2 mostrará el esqueleto inicial de Vite + React; a partir de ese momento, podrás 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" en tu cuenta u organización e indica el repositorio con el proyecto React.
2. El archivo saplo.yaml debe estar en el directorio raíz del repositorio.
3. Confirma y envía el archivo saplo.yaml a la rama de producción (por defecto main).
4. Cada git push posterior a esta rama construye el proyecto y reemplaza el contenido del directorio dist en el Box. Puedes ver el estado en la pestaña Deploymentes.
5. El enrutamiento SPA (todas las rutas van a index.html) se configura automáticamente; no tienes que añadir nada en nginx.

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

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

React en Saplo vs. otras alternativas

Preguntas frecuentes

¿Puedo tener varias aplicaciones React en un solo Box? Sí, el Catálogo de aplicaciones permite desplegar varios módulos en paralelo, cada uno con su propio subdominio o Dominio, siempre que haya suficiente RAM y espacio en disco asignado a tu plan.

¿Qué pasa con el enrutamiento del lado del cliente (React Router)? Funciona sin configuración adicional: el fallback de todas las rutas a index.html se configura inmediatamente después de la instalación.

¿Tengo que usar Vite? La instalación desde el catálogo configura el proyecto a través de Vite, pero puedes desplegar tu propio proyecto (también basado en otro bundler) a través de git, siempre que la compilación genere los archivos listos en el directorio especificado en build.output.

¿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 la versión de Node.js utilizada para la compilación? Al crear una aplicación desde el catálogo, eliges 18, 20 o 22. Para despliegues a través de git, la configuras con el campo runtime.node en saplo.yaml.

En Saplo, puedes configurar React desde cero hasta un Dominio funcional en minutos, y cada git push posterior despliega una nueva versión sin cargar archivos manualmente. Si tu proyecto necesita SSR y mejor SEO, consulta la pila Next.js en el mismo catálogo.