Cómo alojar aplicaciones Preact en Square Cloud

Preact entrega el máximo rendimiento con el mínimo tamaño. Para poner tu proyecto Preact en línea en Square Cloud (ya sea creado con el ecosistema de Vite o vía Preact CLI), compilamos la aplicación en archivos estáticos y los servimos usando la biblioteca serve en el puerto por defecto de la plataforma.

1. Generando el build de producción

Antes de enviar tu proyecto a la nube, debes transformarlo en archivos optimizados y minificados listos para el navegador.

En la terminal de tu proyecto local, ejecuta el comando de compilación:

npm run build

• Si usas Vite (estándar actual): El comando generará la carpeta dist/ en la raíz de tu proyecto.
• Si usas el Preact CLI clásico: El comando generará la carpeta build/.

Para esta guía, asumiremos el uso de la carpeta dist/ estándar de Vite.

2. Configurando el comando de inicio y el puerto 80

Square Cloud utiliza el puerto 80 para dirigir el tráfico. Configura tu comando de inicio (en el Dashboard o en tu archivo squarecloud.app) para abrir el servidor web apuntando a la carpeta correcta.

Comando de start:

npx serve -s dist -p 80

• -s (Single Page Application): Este parámetro es crucial. Garantiza que, si usas preact-router o cualquier otro sistema de rutas, todas las peticiones internas (como /dashboard o /perfil) se redirijan al index.html, evitando el temido error 404 al actualizar la página.
• dist: Indica la carpeta que contiene el resultado de tu build.
• -p 80: Define el puerto de red de Square Cloud.

3. Estructura del archivo de envío (.zip)

Para realizar el upload, crea un archivo comprimido .zip que contenga solo el ecosistema necesario para la ejecución.

• Qué INCLUIR: La carpeta dist/ (o build/), el archivo package.json y el package-lock.json (o yarn.lock).
• Qué EXCLUIR: La carpeta node_modules/ y la carpeta src/. Square Cloud se encargará de descargar e instalar todas las dependencias de forma limpia directamente en el servidor.

4. Consejos de optimización

• Variables de entorno: Si tu frontend Preact consume una API externa, asegúrate de configurar las URLs en las variables de entorno. Si usas Vite, recuerda que las variables que necesitan exponerse al navegador deben empezar con el prefijo VITE_ (ej.: VITE_API_URL).
• Aliasing de React: Si usas bibliotecas del ecosistema de React tradicional en tu proyecto Preact (vía preact/compat), asegúrate de que el alias esté configurado correctamente en tu archivo vite.config.js antes de ejecutar el comando de build para el deploy.

Actualizado el: 13/06/2026