> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Cómo alojar aplicaciones Vite

> Aprende a desplegar tu aplicación Vite en Square Cloud.

export const PortNote = ({lang}) => {
  if (lang == 'pt-br') {
    return <Note>
            <b>Qual porta devo usar para o meu servidor?</b><br />
            Você deve usar a porta <b>80</b> para o seu servidor. A porta 80 é a porta padrão para tráfego HTTP; a Square Cloud a encaminha para 443 (HTTPS) para estabelecer uma conexão segura.<br />
            Certifique-se de configurá-la antes de compactar e enviar seu projeto.
        </Note>;
  }
  return <Note>
            <b>What port should I use for my server?</b><br />
            You should use port <b>80</b> for your server. Port 80 is the default port for HTTP traffic, which is handled by Square Cloud to route it to 443, HTTPS, for a secure connection.<br />
            Make sure to configure it before compressing and uploading your project.
        </Note>;
};

export const RecommendedPlan = ({lang, plan, tier, cpu, appType}) => {
  const url = `https://squarecloud.app/${lang}/pay?plan=${plan.toLowerCase()}&tier=${tier}`;
  if (lang == 'en') {
    return <Note>
        <b>Wondering how much RAM and CPU your plan needs to host {appType}?</b><br />
        Don't worry, we're here to help.
        Our <a href={url}>{plan}</a> plan offers <b>{tier}GB</b> of RAM and <b>{cpu}vCPU</b>, which should be sufficient for most {appType}. 
        However, if you are working on a larger project and seeking extra stability, we recommend considering our <b>Pro</b> plan. With additional resources, you can maintain stability even during demand spikes. 
        To purchase, simply click <a href="https://squarecloud.app/en/pay?plan=pro">here</a>.
      </Note>;
  } else {
    return <Note>
          <b>Está se perguntando quanta RAM e CPU seu plano precisa para hospedar {appType}?</b><br />
          Não se preocupe, estamos aqui para ajudar.
          Nosso plano <a href={url}>{plan}</a> oferece <b>{tier}GB</b> de RAM e <b>{cpu}vCPU</b>, o que deve ser suficiente para a maioria dos {appType}.
          No entanto, se você estiver trabalhando em um projeto maior e precisar de mais estabilidade, recomendamos considerar nosso plano <b>Pro</b>.
          Com recursos adicionais, você pode manter a estabilidade mesmo durante picos de demanda.
          Para comprar, basta clicar <a href={`https://squarecloud.app/${lang}/pay?plan=pro`}>aqui</a>.
        </Note>;
  }
};

export const appType_0 = "a Vite application"

## Introducción

Para desarrollar y alojar {appType_0} 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](https://squarecloud.app/es/signup) usando tu correo electrónico.
* **Plan de pago activo**: Garantiza recursos dedicados y un rendimiento optimizado para tu aplicación. Consulta nuestros [planes disponibles](https://squarecloud.app/es/pricing) y elige el más adecuado para tus necesidades.

<RecommendedPlan appType="Vite Applications" plan="Standard" tier="4" cpu="4" lang="es" />

## 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](https://nodejs.org/).

Para crear un nuevo proyecto Vite, ejecuta el siguiente comando:

```bash theme={null}
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`.

```bash theme={null}
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:

```bash theme={null}
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:

```bash theme={null}
npx vite preview --host 0.0.0.0 --port 80
```

También puedes agregar un script a tu `package.json` para simplificar:

```json theme={null}
{
	"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:

```bash theme={null}
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`

```js theme={null}
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.

<PortNote lang="es" />

### A través del panel

<Steps>
  <Step title="Accede a la página de subida">
    Accede a la [página de subida](https://squarecloud.app/es/dashboard/new) y sube el archivo zip de tu proyecto.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Subiendo aplicación a Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### 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.

<Card title="Aprende más sobre: cómo crear el archivo de configuración para Square Cloud." icon="link" href="/es/getting-started/config-file">
  El archivo squarecloud.app es un archivo de configuración que se usará para configurar tu aplicación; se utilizará para definir tu entorno.
</Card>

<Steps>
  <Step title="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:

    <Tabs>
      <Tab title="Windows">
        ```bash theme={null}
        squarecloud update
        ```
      </Tab>

      <Tab title="Linux, macOS y WSL">
        ```bash theme={null}
        curl -fsSL https://cli.squarecloud.app/install | bash
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Autentícate">
    Ahora, para autenticarte y usar otros comandos de la CLI, encontrarás tu clave de autorización [aquí](https://squarecloud.app/es/account/security) haciendo clic en "Request API Key". Después de obtener tu clave de autorización, ejecuta el siguiente comando:

    ```bash theme={null}
    squarecloud auth login
    ```
  </Step>

  <Step title="Sube tu proyecto">
    Por último, para desplegar tu aplicación en Square Cloud usando la CLI, necesitas ejecutar el siguiente comando:

    ```bash theme={null}
    squarecloud upload 
    ```

    O si creaste el zip manualmente, puedes usar:

    ```bash theme={null}
    squarecloud upload --file <path/to/zip> 
    ```
  </Step>
</Steps>

## Recursos adicionales

Para más información sobre Vite y sus herramientas, visita la [documentación oficial de Vite](https://vitejs.dev/guide/). 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

<CardGroup cols={1}>
  ### Dominio personalizado

  <Card horizontal>
    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.
  </Card>

  ### Requisitos mínimos de RAM

  <Card horizontal>
    **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.
  </Card>

  ### No se pudo encontrar este sitio.

  <Card horizontal>
    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**.
  </Card>

  ### El sitio tardó demasiado en responder...

  <Card horizontal>
    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`.
  </Card>
</CardGroup>

## Contáctanos

Si continúas enfrentando **dificultades técnicas**, nuestro **equipo de soporte especializado** está disponible para ayudarte. [**Contáctanos**](https://squarecloud.app/es/support) y estaremos encantados de ayudarte a resolver cualquier problema.