Cómo instalar Angular en Saplo (SPA empresarial)

Angular es el más completo de los frameworks frontend populares, impone su propia estructura de proyecto, tipado a través de TypeScript y módulos, lo que funciona bien en grandes aplicaciones corporativas mantenidas por todo un equipo. Al igual que React o Vue, Angular en sí mismo no es un hosting: un proyecto construido son archivos estáticos HTML, CSS y JS que requieren un servidor con un fallback de ruta correcto para Angular Router en modo historial. En Saplo, instalas Angular de la misma manera que cualquier otra aplicación del catálogo: el motor andamia el proyecto, lo construye a través de Angular CLI, detecta el directorio real con el resultado index.html y lo expone bajo nginx junto con el fallback de ruta.

Para quién es Angular en Saplo

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

• Estás construyendo un sistema interno grande o un panel para múltiples roles - la estructura de módulos y el tipado estricto de Angular facilitan el mantenimiento del código cuando varias personas trabajan en el proyecto.
• El equipo ya conoce Angular - Saplo no impone ninguna capa adicional; obtienes un proyecto estándar generado por Angular CLI.
• El frontend se conectará a tu propia API - instalas SPA junto al backend (Django, Node, Docker) en el mismo Box o por separado.
• Aplicación de una sola página con Angular Router en modo history - el fallback de todas las rutas a index.html se configura automáticamente, no necesitas añadir nada en nginx.
• Quieres despliegues con git push en lugar de subir archivos manualmente por FTP - vinculas el repositorio una vez, cada push a la rama de producción construye y despliega una nueva versión automáticamente.

Si el proyecto es más pequeño y no necesitas la estructura completa de módulos de Angular, consulta en el Catálogo de aplicaciones stacks más ligeros como React o Vue.

Requisitos

Para instalar Angular en Saplo, necesitas:

• Un Box al menos en el plan S - una SPA construida es un puñado de archivos estáticos, pero el proceso de construcción de Angular CLI es más pesado que en React o Vue, por lo que el manifiesto de la receta requiere un mínimo de 520 MB de RAM libre para la construcción y 3 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 un 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 Angular (categoría "Aplicaciones").
2. Indica tu Box y el nombre de la aplicación; se creará el subdominio predeterminado <name>.saploapp.pl a partir de este.
3. Selecciona la versión de Node.js para la compilación (18, 20 o 22, la 20 por defecto) y confirma la instalación.
4. El motor crea la estructura de Angular a través de Angular CLI (equivalente a ng new --defaults --ssr=false), instala las dependencias y compila el proyecto para producción (ng build --configuration=production).
5. Después de la compilación, el motor detecta automáticamente si el archivo resultante index.html se encuentra en dist/<project>/ (Angular anterior a la versión 17) o en dist/<project>/browser/ (Angular 17 y versiones posteriores, donde el directorio dist está preparado para SSR), y copia el nivel de directorio apropiado a la aplicación servida por nginx.
6. Una vez finalizada la instalación, el dominio del paso 2 muestra la estructura inicial de Angular. A partir de este momento, puedes desplegar tu propio código en ella.

Despliegue de tu propio código a través de 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" e indica el repositorio con el proyecto Angular.
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 los archivos resultantes en el Box, el estado lo puedes ver en la pestaña Despliegues.
5. Si la construcción falla, la versión anterior que funcionaba permanece en su lugar - Saplo no la reemplaza por una rota.

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

name: my-project
stack: angular
build:
  install: npm ci
  command: npm run build
  output: dist/my-project/browser

Si no configuras el campo build.output, el motor detectará el directorio correcto con index.html automáticamente, pero la configuración explícita acelera la construcción y elimina errores en proyectos con nombres no estándar.

Angular en Saplo vs. alternativas

Preguntas frecuentes

¿Funciona Angular Router en modo de historial sin configuración adicional? Sí, la reserva para todas las rutas en index.html está activa inmediatamente después de la instalación, por lo que actualizar cualquier subpágina no resultará en un error 404.

Angular 17 cambió la estructura del directorio dist, ¿es un problema en Saplo? No, el motor comprueba automáticamente después de la compilación si index.html está en dist/<project>/ o en dist/<project>/browser/, y copia el nivel de directorio correcto sin tu intervención.

¿Puedo tener varias aplicaciones Angular en el mismo Box? Sí, el Catálogo de aplicaciones te permite implementar varios módulos uno al lado del otro, cada uno con su propia subdominio o Dominio.

¿Obtendré SSL y mi propio Dominio? 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 mi proyecto tiene un nombre personalizado? Establece el campo build.output en saplo.yaml a la ruta correcta, por ejemplo, dist/project-name/browser.

En Saplo, puedes configurar Angular desde cero hasta un Dominio funcional en cuestión de minutos, y el motor detecta automáticamente los cambios en la estructura del directorio dist entre las versiones de Angular. Si el proyecto es más pequeño que una aplicación empresarial típica, consulta las pilas más ligeras de React o Vue en el mismo Catálogo de aplicaciones.