> ## 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 hospedar aplicaciones Preact

> Aprende a desplegar tu aplicación Preact 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 = "una aplicación Preact"

## 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="aplicaciones Preact" plan="Standard" tier="4" cpu="4" lang="es" />

## Creando el proyecto

Antes de empezar, asegúrate de tener **Node.js y npm** instalados en tu sistema.
Si aún no los tienes, descárgalos desde el sitio oficial de [Node.js](https://nodejs.org/).

### Instalación de la CLI

Para crear un nuevo proyecto Preact, usa la **Preact CLI**. Instálala de forma global:

```bash theme={null}
npm install -g preact-cli
```

### Desarrollando el proyecto

Crea un nuevo proyecto Preact:

```bash theme={null}
preact create default my-preact-app
```

Luego instala las dependencias:

```bash theme={null}
cd my-preact-app
npm install
```

Inicia el servidor de desarrollo local con:

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

Tu aplicación Preact se iniciará en `http://localhost:8080` (u otro puerto disponible).

Para editar un componente simple, modifica:

```
src/components/app.js
```

Ejemplo:

```javascript app.js theme={null}
export default function App() {
  return (
    <div>
      <h1>Hello from Preact!</h1>
    </div>
  );
}
```

## Compilando el proyecto

Antes de subirlo, genera la compilación de producción:

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

Preact generará los archivos estáticos optimizados dentro del directorio `build/`.

## Eligiendo un servidor de producción

Para servir tu Preact en producción necesitas un servidor. Puedes crear el tuyo o usar los existentes.

### Librería Express

Para servir tu proyecto estático en Square Cloud, asegúrate de que tu servidor entregue correctamente los archivos estáticos. Para usar Node.js con Express, una configuración común es:

```javascript server.js theme={null}
import express from 'express';
import path from 'path';

const app = express();
const distPath = path.join(import.meta.dirname, 'dist');

app.use(express.static(distPath));

// SPA fallback: serve index.html for any route not matched above
app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(80, () => console.log('Server running on port 80'));
```

<Note>Ajusta los parámetros de las rutas `dist` a la carpeta de compilación de tu proyecto. Si está en una carpeta dentro de `build` o `dist`, usa esa ruta en su lugar.</Note>

### Librería Serve

#### Instalación de la librería Serve

Para instalar la librería `serve`, navega hasta el directorio de tu proyecto en la terminal y ejecuta el siguiente comando:

```bash theme={null}
npm install serve@14.2.3
```

Este comando instala la versión `14.2.3` de la librería `serve`. Si quieres instalar la última versión, puedes omitir el `@14.2.3`.

#### Configuración del script de inicio

Después de instalar la librería `serve`, necesitas configurar el script de inicio de tu proyecto para usar `serve`. Para ello, abre el archivo `package.json` de tu proyecto y añade un nuevo script llamado `start:prod`:

```json theme={null}
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
```

En el script `start:prod`, `serve -s build -l 80` hace lo siguiente:

* `serve`: Es el comando para iniciar el servidor `serve`.
* `-s dist`: La opción `-s` sirve el directorio `dist` en modo de aplicación de página única (single-page application). Esto significa que todas las solicitudes no encontradas se redirigirán a `index.html`. El directorio `dist` se crea habitualmente cuando ejecutas `npm run build`.
* `-l 80`: La opción `-l` seguida de `80` le indica a `serve` que escuche en el puerto 80. El puerto 80 es el puerto predeterminado para el tráfico HTTP.

<Note>Ajusta el parámetro `dist` a la carpeta de compilación de tu proyecto. Si está dentro de una carpeta `build` o `dist`, usa esa ruta en su lugar.</Note>

## Desplegando

Después de preparar los archivos de tu proyecto, ya puedes subirlos a Square Cloud y hospedar 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 Preact, visita la documentación oficial [aquí](https://preactjs.com/guide/v10)

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