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

# Come ospitare applicazioni Qwik

> Scopri come distribuire la tua applicazione Qwik su 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 = "un'applicazione Qwik"

## Introduzione

Per sviluppare e ospitare {appType_0} su Square Cloud, è essenziale seguire una sequenza strutturata di configurazioni e prerequisiti. Questa guida tecnica coprirà l'intero processo, dalla configurazione iniziale al deploy in produzione.

### Prerequisiti

* **Account Square Cloud**: Registrati tramite la [pagina di registrazione](https://squarecloud.app/it/signup) usando la tua email.
* **Piano a pagamento attivo**: Garantisce risorse dedicate e prestazioni ottimizzate per la tua applicazione. Consulta i nostri [piani disponibili](https://squarecloud.app/it/pricing) e scegli quello più adatto alle tue esigenze.

<RecommendedPlan appType="applicazioni Qwik" plan="Standard" tier="4" cpu="4" lang="it" />

## Creazione del progetto

Prima di iniziare, assicurati di avere **Node.js (>=20)** e **npm** installati sul tuo sistema. Se non li hai ancora, scaricali dal sito ufficiale di [Node.js](https://nodejs.org/).

Inizializza un nuovo progetto Qwik usando l'inizializzatore ufficiale:

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

Segui le istruzioni per scegliere `Qwik City` (applicazione completa) o `Qwik App` (statica) e qualsiasi integrazione ti serva.

### Installazione delle dipendenze

Dopo la creazione, entra nel progetto e installa le dipendenze:

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

Se hai selezionato Qwik City, il tuo progetto includerà punti di ingresso lato server e adapter per Node, Cloudflare, ecc.

### Sviluppo del progetto

Avvia il server di sviluppo:

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

Il server di sviluppo di solito funziona su `http://localhost:5173` (impostazione predefinita di Vite) o come mostrato nell'output dell'inizializzatore.

Crea una pagina semplice in `src/routes/index.tsx` (Qwik City) o `src/components/` per i componenti:

```tsx theme={null}
export default function Index() {
  return <h1>Hello from Qwik!</h1>;
}
```

## Compilazione del progetto

Genera l'output di produzione prima di caricare:

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

Se usi Qwik City con un adapter (ad esempio `@builder.io/qwik-city/middleware/node`), il tuo comando di avvio di produzione punterà all'entry del server compilato, comunemente qualcosa come:

```bash theme={null}
node build/index.mjs
```

Per i siti puramente statici, puoi usare un server.

## Scelta di un server di produzione

Per servire il tuo Qwik in produzione hai bisogno di un server. Puoi crearne uno tuo oppure usarne di esistenti.

### Libreria Express

Per servire il tuo progetto statico su Square Cloud, assicurati che il tuo server distribuisca correttamente i file statici. Per usare Node.js con Express, una configurazione comune è:

```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>Adatta i parametri dei percorsi `dist` alla cartella di build del tuo progetto. Se si trova in una cartella all'interno di `build` o `dist`, usa quel percorso.</Note>

### Libreria Serve

#### Installare la libreria Serve

Per installare la libreria `serve`, spostati nella directory del tuo progetto nel terminale ed esegui il seguente comando:

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

Questo comando installa la versione `14.2.3` della libreria `serve`. Se vuoi installare l'ultima versione, puoi omettere `@14.2.3`.

#### Configurare lo script di avvio

Dopo aver installato la libreria `serve`, devi configurare lo script di avvio del tuo progetto per utilizzare `serve`. Per farlo, apri il file `package.json` del tuo progetto e aggiungi un nuovo script chiamato `start:prod`:

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

Nello script `start:prod`, `serve -s build -l 80` fa quanto segue:

* `serve`: Questo è il comando per avviare il server `serve`.
* `-s dist`: L'opzione `-s` serve la directory `dist` in modalità single-page application. Questo significa che tutte le richieste non trovate verranno reindirizzate a `index.html`. La directory `dist` viene comunemente creata quando esegui `npm run build`.
* `-l 80`: L'opzione `-l` seguita da `80` indica a `serve` di ascoltare sulla porta 80. La porta 80 è la porta predefinita per il traffico HTTP.

<Note>Adatta il parametro `dist` alla cartella di build del tuo progetto. Se si trova in una cartella all'interno di `build` o `dist`, usa quel percorso al suo posto.</Note>

## Distribuzione

Dopo aver preparato i file del tuo progetto, puoi ora caricarli su Square Cloud e ospitare il tuo progetto.
Per farlo, crea un file ZIP contenente tutti i file del tuo progetto.

<PortNote lang="it" />

### Tramite dashboard

<Steps>
  <Step title="Accedi alla pagina di upload">
    Accedi alla [pagina di upload](https://squarecloud.app/it/dashboard/new) e carica il file zip del tuo progetto.
  </Step>

  <Step title="Configura il tuo ambiente">
    Dopo aver caricato il tuo zip, dovrai configurare il nome, il file principale o il runtime environment e altre impostazioni per il tuo progetto.\
    Se stai caricando un progetto web, assicurati di selezionare "Web Publication" e di impostare un sottodominio per il tuo progetto.
  </Step>

  <Step title="Esegui il deploy del tuo progetto">
    Infine, clicca sul pulsante "Deploy" per ospitare il tuo progetto su Square Cloud.\
    Dopo il deploy, puoi monitorare lo stato e i log del tuo progetto dalla dashboard.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Caricamento dell'applicazione su Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### Tramite CLI

Per utilizzare questo metodo, devi creare un file di configurazione chiamato `squarecloud.app` nella directory principale del tuo progetto. Questo file conterrà la configurazione necessaria per il tuo progetto.

<Card title="Scopri di più su: come creare il file di configurazione per Square Cloud." icon="link" href="/it/getting-started/config-file">
  Il file squarecloud.app è un file di configurazione che verrà utilizzato per configurare la tua applicazione; verrà usato per definire il tuo ambiente.
</Card>

<Steps>
  <Step title="Installa la CLI">
    Per prima cosa, devi avere la CLI installata nel tuo ambiente. Se non la hai ancora, esegui il seguente comando nel tuo terminale:

    ```
    npm install -g @squarecloud/cli
    ```

    Se la hai già, ti consigliamo di aggiornarla. Per farlo, esegui il seguente comando nel tuo terminale:

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

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

  <Step title="Autenticati">
    Ora, per autenticarti e utilizzare gli altri comandi della CLI, troverai la tua chiave di autorizzazione [qui](https://squarecloud.app/it/account/security) cliccando su "Request API Key". Dopo aver ottenuto la tua chiave di autorizzazione, esegui il seguente comando:

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

  <Step title="Carica il tuo progetto">
    Infine, per eseguire il deploy della tua applicazione su Square Cloud tramite la CLI, devi eseguire il seguente comando:

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

    Oppure, se hai creato lo zip manualmente, puoi usare:

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

## Risorse aggiuntive

Per maggiori informazioni su Qwik, visita la documentazione ufficiale [qui](https://qwik.builder.io/docs/).

## Risoluzione dei problemi

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

  <Card horizontal>
    Per utilizzare un dominio personalizzato (ad esempio, `mysite.com`) invece dell'URL predefinito `mysite.squareweb.app`, hai bisogno del **piano Standard o superiore**. Il sottodominio è definito dal campo **SUBDOMAIN** nel file di configurazione.
  </Card>

  ### Requisiti minimi di RAM

  <Card horizontal>
    **Minimo: 512MB di RAM** per siti web/API semplici. Per siti con framework (Next.JS, React, Vue, Angular, ecc.), consigliamo sempre **almeno 1GB di RAM**. Per applicazioni più grandi, alloca più RAM per evitare che l'applicazione esaurisca la memoria e si arresti in modo anomalo.
  </Card>

  ### Impossibile trovare questo sito.

  <Card horizontal>
    Verifica che il **sottodominio/dominio** corrisponda a quanto configurato nel campo **SUBDOMAIN** o nelle **impostazioni del dominio personalizzato**. Se hai appena caricato il sito, attendi fino a **60 secondi** affinché Square abiliti il **primo accesso**.
  </Card>

  ### Il sito ha impiegato troppo tempo per rispondere...

  <Card horizontal>
    Verifica di aver configurato correttamente la **porta 80** e l'**host 0.0.0.0** nell'applicazione. Consigliamo di utilizzare le variabili d'ambiente forzate di Square: **PORT** e **HOST** dal file `.env`.
  </Card>
</CardGroup>

## Contattaci

Se continui a riscontrare **difficoltà tecniche**, il nostro **team di supporto specializzato** è disponibile ad assisterti. [**Contattaci**](https://squarecloud.app/it/support) e saremo felici di aiutarti a risolvere qualsiasi problema.
