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

> Aprende a desplegar tu aplicación Vue 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 Vue 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="Vue 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 aún no los tienes, puedes descargarlos desde el [sitio web oficial de Node.js](https://nodejs.org/).

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

```bash theme={null}
npm create vue@latest
```

En este comando, `npm create vue@latest` se usa para crear un nuevo proyecto Vue con la última versión de Vue. El comando `npm create` es una herramienta que viene con `npm`, el gestor de paquetes de Node.js. Se usa para inicializar un paquete npm nuevo o existente.

`vue@latest` es un paquete disponible en el registro de npm que configura un nuevo proyecto Vue por ti. Se encarga de toda la configuración inicial, como crear el directorio del proyecto, instalar las dependencias necesarias y configurar los archivos básicos.

`@latest` es una etiqueta que especifica que quieres usar la última versión del paquete `vue`. Esto garantiza que siempre uses la versión más actualizada y, en consecuencia, tengas acceso a las últimas funcionalidades.

## Compilando el proyecto

Genera la salida de producción antes de subir:

```bash theme={null}
npm run build
```

## Desplegando

Después de preparar los archivos de tu proyecto, ya puedes subirlos 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 Vue y sus herramientas, visita la [documentación oficial de Vue](https://vuejs.org/). Allí encontrarás guías detalladas, tutoriales y documentación de la API para ayudarte a aprovechar al máximo Vue.

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