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

> Scopri come distribuire la tua applicazione Remix 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 = "a Remix application"

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

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

### Installazione della CLI di Remix

Per creare e gestire applicazioni Remix, installa globalmente la CLI di Remix:

```bash theme={null}
npm install -g create-remix
```

### Sviluppo del progetto

Ora crea un nuovo progetto Remix con:

```bash theme={null}
create-remix myapp
```

Seleziona la destinazione di distribuzione preferita.\
Per Square Cloud, è consigliata l'opzione **server Node.js**.

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

```bash theme={null}
cd myapp 
npm install
```

Avvia il server di sviluppo:

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

Di solito questo avvia la tua applicazione su `http://localhost:5173/`.

#### Esempio di route di base

Le route di Remix sono basate su file. Ecco un semplice esempio di una route in `app/routes/_index.tsx`:

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

## Compilazione del progetto

Compila l'output di produzione prima di caricarlo:

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

## Scegliere un server di produzione

Per servire la tua app Remix in produzione hai bisogno di un server. Puoi crearne uno tuo oppure usare quelli esistenti.

### Remix serve

Puoi usare il webserver di Remix per servirla. Puoi farlo eseguendo il comando `remix-serve` con la cartella dist.
Guarda l'esempio qui sotto:

```bash theme={null}
npx remix-serve remix-serve build/index.js
```

## Distribuzione

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

<PortNote lang="en" />

### 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 Remix, consulta la documentazione ufficiale [qui](https://remix.run/docs). Include guide complete, tutorial, riferimenti alle API e best
practice.

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