Saltar al contenido principal

​
Introducción

Para desarrollar y alojar en Square Cloud, es esencial seguir una secuencia estructurada de configuraciones y requisitos previos. Esta guía técnica cubrirá todo el proceso, desde la configuración inicial hasta el despliegue en producción.

​
Requisitos previos

  • Cuenta de Square Cloud: Regístrate a través de la página de registro usando tu correo electrónico.
  • Plan de pago activo: Garantiza recursos dedicados y un rendimiento optimizado para tu aplicación. Consulta nuestros planes disponibles y elige el más adecuado para tus necesidades.

​
Creando el proyecto

Antes de comenzar, asegúrate de tener Node.js y npm instalados en tu sistema. Si no los tienes, puedes descargarlos desde el sitio web oficial de Node.js. Para crear un nuevo proyecto Vite, ejecuta el siguiente comando: 
npm create vite@latest my-vite-app
En el comando anterior, my-vite-app es el nombre de tu nuevo proyecto. Reemplázalo con el nombre que quieras para tu proyecto. Por defecto, este comando configura un proyecto Vite con JavaScript.

​
Eligiendo una plantilla específica

Vite te permite elegir diferentes plantillas para tu proyecto. Al crear un nuevo proyecto, puedes especificar la plantilla deseada usando la opción --template. Aquí tienes algunos ejemplos: Selecciona una plantilla como: react, vue y lit. 
npm create vite@latest my-vite-app --template [template]
Elige la plantilla que mejor se adapte a tus necesidades y ajusta el nombre del proyecto según sea necesario.

​
Entendiendo la diferencia entre JavaScript y TypeScript

Cuando eliges JavaScript, Vite configura el proyecto con los ajustes predeterminados de JavaScript. Por otro lado, cuando eliges TypeScript, Vite configura el proyecto con los ajustes de TypeScript, incluida la generación de un archivo tsconfig.json.

​
Compilando el proyecto

Antes de subir a producción, genera los artefactos de producción usando la build de Vite: 
npm run build
Para servir la versión de producción localmente (útil para probar en el entorno de despliegue), recomendamos usar el comando vite preview, exponiendo la aplicación en todas las interfaces y en el puerto 80: 
npx vite preview --host 0.0.0.0 --port 80
También puedes agregar un script a tu package.json para simplificar: 
{
	"scripts": {
		"build": "vite build",
		"preview": "vite preview --host 0.0.0.0 --port 80"
	}
}
Nota: En algunos sistemas, el puerto 80 requiere privilegios especiales. Si hay una restricción, usa otro puerto (por ejemplo, 8080) y mapéalo en el host/servicio.

​
Eligiendo un servidor de producción

Para producción tienes básicamente dos opciones:
  • Con nuestro runtime estático HTML/CSS, simplemente renombra index.html a vite.html.
  • Usa el propio vite preview (útil para probar el comportamiento de producción o en contenedores que ejecutan el proceso de Node directamente).

​
Runtime HTML/CSS

Si eliges el runtime estático, genera la build (npm run build) y copia el contenido de dist/ al archivo zip comprimido que se enviará a Square Cloud. Recuerda renombrar index.html a vite.html para que el runtime reconozca correctamente el archivo inicial como una aplicación Vite y realice el manejo adecuado de los assets.

​
Usando vite preview en producción (o en contenedores)

vite preview sirve los archivos generados por vite build con un comportamiento similar al de un servidor estático de producción. Para exponer la aplicación a la red (por ejemplo, dentro de un contenedor en Square Cloud) usa: 
npx vite preview --host 0.0.0.0 --port 80
Esto hace que el proceso escuche en todas las interfaces (0.0.0.0) y en el puerto 80.

​
Ejemplo de vite.config.js con opciones de preview

import { defineConfig } from 'vite'

export default defineConfig({
	preview: {
		host: '0.0.0.0',
		port: 80,
		strictPort: true
	}
})

​
Desplegando

Después de preparar los archivos de tu proyecto, puedes enviarlos a Square Cloud y alojar tu proyecto. Para ello, crea un archivo ZIP que contenga todos los archivos de tu proyecto.

​
A través del panel

1

Accede a la página de subida

Accede a la página de subida y sube el archivo zip de tu proyecto.
2

Configura tu entorno

Después de subir tu zip, deberás configurar el nombre, el archivo principal o el entorno de ejecución y otros ajustes de tu proyecto.
Si estás subiendo un proyecto web, asegúrate de seleccionar “Publicación Web” y de definir un subdominio para tu proyecto.
3

Despliega tu proyecto

Por último, haz clic en el botón “Deploy” para alojar tu proyecto en Square Cloud.
Tras el despliegue, puedes monitorear el estado y los logs de tu proyecto desde el panel.
Subiendo aplicación a Square Cloud

​
A través de la CLI

Para usar este método, necesitas crear un archivo de configuración llamado squarecloud.app en el directorio raíz de tu proyecto. Este archivo contendrá la configuración necesaria para tu proyecto.

Aprende más sobre: cómo crear el archivo de configuración para Square Cloud.

El archivo squarecloud.app es un archivo de configuración que se usará para configurar tu aplicación; se utilizará para definir tu entorno.
1

Instala la CLI

Primero, necesitas tener la CLI instalada en tu entorno. Si aún no la tienes, ejecuta el siguiente comando en tu terminal:
npm install -g @squarecloud/cli
Si ya la tienes, te recomendamos actualizarla. Para ello, ejecuta el siguiente comando en tu terminal:
squarecloud update
2

Autentícate

Ahora, para autenticarte y usar otros comandos de la CLI, encontrarás tu clave de autorización aquí haciendo clic en “Request API Key”. Después de obtener tu clave de autorización, ejecuta el siguiente comando:
squarecloud auth login
3

Sube tu proyecto

Por último, para desplegar tu aplicación en Square Cloud usando la CLI, necesitas ejecutar el siguiente comando:
squarecloud upload
O si creaste el zip manualmente, puedes usar:
squarecloud upload --file <path/to/zip>

​
Recursos adicionales

Para más información sobre Vite y sus herramientas, visita la documentación oficial de Vite. Allí encontrarás guías detalladas, tutoriales y documentación de la API para ayudarte a aprovechar al máximo Vite.

​
Solución de problemas

​
Dominio personalizado

Para usar un dominio personalizado (por ejemplo, mysite.com) en lugar de la URL predeterminada mysite.squareweb.app, necesitas el plan Standard o superior. El subdominio se define mediante el campo SUBDOMAIN en el archivo de configuración.

​
Requisitos mínimos de RAM

Mínimo: 512MB de RAM para sitios web/APIs sencillos. Para sitios con frameworks (Next.JS, React, Vue, Angular, etc.), siempre recomendamos al menos 1GB de RAM. Para aplicaciones más grandes, asigna más RAM para evitar que la aplicación se quede sin memoria y falle.

​
No se pudo encontrar este sitio.

Verifica que el subdominio/dominio coincida con lo configurado en el campo SUBDOMAIN o en la configuración del dominio personalizado. Si acabas de subir el sitio, espera hasta 60 segundos para que Square habilite el primer acceso.

​
El sitio tardó demasiado en responder…

Verifica que hayas configurado correctamente el puerto 80 y el host 0.0.0.0 en la aplicación. Recomendamos usar las variables de entorno forzadas de Square: PORT y HOST del archivo .env.

​
Contáctanos

Si continúas enfrentando dificultades técnicas, nuestro equipo de soporte especializado está disponible para ayudarte. Contáctanos y estaremos encantados de ayudarte a resolver cualquier problema.