Cómo alojar aplicaciones Angular en Square Cloud

A diferencia de un bot de Discord, Angular no se "ejecuta" por sí solo; necesita un servidor web para entregar los archivos al navegador del usuario. En Square Cloud, la estrategia más eficiente es compilar el proyecto y servirlo usando la biblioteca serve.

1. El paso fundamental: Build de producción

El primer paso es transformar tu código TypeScript y componentes en archivos que cualquier navegador entienda. Ejecuta el comando de build en tu máquina local:

ng build --configuration production

Esto creará una carpeta llamada dist/ en la raíz de tu proyecto. Dentro de ella habrá otra carpeta con el nombre de tu proyecto que contiene el index.html y los bundles de JavaScript.

2. Preparando el servidor web

Para que Square Cloud sepa cómo entregar esos archivos, utilizaremos la biblioteca serve, que es ligera e ideal para SPAs.

Añadiendo la dependencia

En tu archivo package.json, añade serve a las dependencias:

"dependencies": {
  "serve": "^14.0.0"
}

3. Configuración de red y puerto

Square Cloud pone a disposición el puerto 80 para que tu aplicación lo utilice y reciba peticiones. serve facilita esto con parámetros simples.

El comando de start

Tu comando de inicio (definido en el Dashboard o en el archivo de configuración) debe ser:

npx serve -s dist -p 80

• -s (Single Page Application): Redirige todas las rutas al index.html. Esto es vital para que el enrutamiento de Angular (ej.: /dashboard, /login) funcione sin dar error 404 al actualizar la página.
• dist: La ruta exacta donde están tus archivos compilados.
• -p 80: Define el puerto obligatorio de Square Cloud.

4. ¿Qué enviar en el ZIP?

Para un deploy limpio, tu archivo .zip debe contener:

1. La carpeta dist/ completa.
2. El archivo package.json.

Nota: No envíes la carpeta node_modules ni la carpeta src. El servidor solo necesita los archivos compilados y las instrucciones de instalación.

5. Consejos para rutas y rendimiento

• Enrutamiento: El parámetro -s en el comando de serve es esencial para las SPAs de Angular, evitando errores 404 al recargar rutas internas.
• Variables de entorno: Si tu aplicación consume una API, recuerda configurar las URLs en los archivos environment.prod.ts antes de hacer el build, o usa soluciones de inyección de variables en tiempo de ejecución.

Actualizado el: 13/06/2026