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

> Scopri come distribuire la tua applicazione Vue 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 Vue"

## 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="Vue applications" plan="Standard" tier="4" cpu="4" lang="it" />

## Creazione del progetto

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

Per creare un nuovo progetto Vue, esegui il seguente comando:

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

In questo comando, `npm create vue@latest` viene utilizzato per creare un nuovo progetto Vue con l'ultima versione di Vue. Il comando `npm create` è uno strumento fornito con `npm`, il gestore di pacchetti di Node.js. Viene utilizzato per inizializzare un pacchetto npm nuovo o esistente.

`vue@latest` è un pacchetto disponibile nel registro npm che configura un nuovo progetto Vue per te. Si occupa di tutta la configurazione iniziale, come la creazione della directory del progetto, l'installazione delle dipendenze necessarie e la configurazione dei file di base.

`@latest` è un tag che specifica che vuoi utilizzare l'ultima versione del pacchetto `vue`. Questo garantisce che tu stia sempre usando la versione più aggiornata e, di conseguenza, abbia accesso alle funzionalità più recenti.

## Compilazione del progetto

Compila l'output di produzione prima del caricamento:

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

## 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 Vue e i suoi strumenti, visita la [documentazione ufficiale di Vue](https://vuejs.org/). Lì troverai guide dettagliate, tutorial e documentazione delle API per aiutarti a sfruttare al meglio Vue.

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