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

# Comment héberger des applications Remix

> Apprenez à déployer votre application Remix sur 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"

## Introduction

Pour développer et héberger {appType_0} sur Square Cloud, il est essentiel de suivre une séquence structurée de configurations et de prérequis. Ce guide technique couvrira l'ensemble du processus, de la configuration initiale au déploiement en production.

### Prérequis

* **Compte Square Cloud** : Inscrivez-vous via la [page d'inscription](https://squarecloud.app/fr/signup) en utilisant votre adresse e-mail.
* **Plan payant actif** : Garantit des ressources dédiées et des performances optimisées pour votre application. Consultez nos [plans disponibles](https://squarecloud.app/fr/pricing) et choisissez celui qui convient le mieux à vos besoins.

<RecommendedPlan appType="Remix applications" plan="Standard" tier="4" cpu="4" lang="fr" />

## Créer le projet

Avant de commencer, assurez-vous d'avoir **Node.js (>= 20)** et **npm** installés sur votre système.
Si ce n'est pas encore le cas, téléchargez-les depuis le [site officiel de Node.js](https://nodejs.org/).

### Installer la CLI Remix

Pour créer et gérer des applications Remix, installez la CLI Remix de manière globale :

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

### Développer le projet

Créez maintenant un nouveau projet Remix avec :

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

Sélectionnez la cible de déploiement souhaitée.\
Pour Square Cloud, l'option **serveur Node.js** est recommandée.

Après la création, accédez à votre projet et installez les dépendances :

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

Démarrez le serveur de développement :

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

Cela démarre généralement votre application à l'adresse `http://localhost:5173/`.

#### Exemple de route de base

Les routes Remix sont basées sur les fichiers. Voici un exemple simple de route dans `app/routes/_index.tsx` :

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

## Compiler le projet

Compilez la sortie de production avant l'envoi :

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

## Choisir un serveur de production

Pour servir votre Remix en production, vous avez besoin d'un serveur. Vous pouvez créer le vôtre ou utiliser des serveurs existants.

### Remix serve

Vous pouvez utiliser le serveur web Remix pour le servir. Pour ce faire, exécutez la commande `remix-serve` avec le dossier dist.
Consultez l'exemple ci-dessous :

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

## Déploiement

Après avoir préparé les fichiers de votre projet, vous pouvez maintenant les envoyer sur Square Cloud et héberger votre projet.
Pour ce faire, créez un fichier ZIP contenant tous les fichiers de votre projet.

<PortNote lang="fr" />

### Via le tableau de bord

<Steps>
  <Step title="Accéder à la page d'upload">
    Accédez à la [page d'upload](https://squarecloud.app/fr/dashboard/new) et téléversez le fichier zip de votre projet.
  </Step>

  <Step title="Configurer votre environnement">
    Après avoir téléversé votre zip, vous devrez configurer le nom, le fichier principal ou l'environnement d'exécution ainsi que d'autres paramètres de votre projet.\
    Si vous téléversez un projet web, veillez à sélectionner « Publication Web » et à définir un sous-domaine pour votre projet.
  </Step>

  <Step title="Déployer votre projet">
    Enfin, cliquez sur le bouton « Deploy » pour héberger votre projet sur Square Cloud.\
    Une fois le déploiement effectué, vous pouvez suivre l'état et les logs de votre projet depuis le tableau de bord.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Téléversement d'une application vers Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### Via la CLI

Pour utiliser cette méthode, vous devez créer un fichier de configuration nommé `squarecloud.app` à la racine de votre projet. Ce fichier contiendra la configuration nécessaire à votre projet.

<Card title="En savoir plus : comment créer le fichier de configuration pour Square Cloud." icon="link" href="/fr/getting-started/config-file">
  Le fichier squarecloud.app est un fichier de configuration qui servira à configurer votre application ; il sera utilisé pour définir votre environnement.
</Card>

<Steps>
  <Step title="Installer la CLI">
    Tout d'abord, vous devez avoir la CLI installée dans votre environnement. Si ce n'est pas encore le cas, exécutez la commande suivante dans votre terminal :

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

    Si vous l'avez déjà, nous vous recommandons de la mettre à jour. Pour cela, exécutez la commande suivante dans votre terminal :

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

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

  <Step title="S'authentifier">
    Maintenant, pour vous authentifier et utiliser les autres commandes de la CLI, vous trouverez votre clé d'autorisation [ici](https://squarecloud.app/fr/account/security) en cliquant sur « Request API Key ». Après avoir obtenu votre clé d'autorisation, exécutez la commande suivante :

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

  <Step title="Téléverser votre projet">
    Enfin, pour déployer votre application sur Square Cloud à l'aide de la CLI, vous devez exécuter la commande suivante :

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

    Ou si vous avez créé le zip manuellement, vous pouvez utiliser :

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

## Ressources supplémentaires

Pour plus d'informations sur Remix, consultez la documentation officielle [ici](https://remix.run/docs). Elle comprend des guides complets, des tutoriels, des références d'API et des bonnes
pratiques.

## Dépannage

<CardGroup cols={1}>
  ### Domaine personnalisé

  <Card horizontal>
    Pour utiliser un domaine personnalisé (par exemple `mysite.com`) au lieu de l'URL par défaut `mysite.squareweb.app`, vous avez besoin du **plan Standard ou supérieur**. Le sous-domaine est défini par le champ **SUBDOMAIN** dans le fichier de configuration.
  </Card>

  ### Prérequis minimum en RAM

  <Card horizontal>
    **Minimum : 512 Mo de RAM** pour les sites web/API simples. Pour les sites utilisant des frameworks (Next.JS, React, Vue, Angular, etc.), nous recommandons toujours **au moins 1 Go de RAM**. Pour les applications plus volumineuses, allouez davantage de RAM afin d'éviter que l'application ne manque de mémoire et ne plante.
  </Card>

  ### Impossible de trouver ce site.

  <Card horizontal>
    Vérifiez que le **sous-domaine/domaine** correspond à ce qui est configuré dans le champ **SUBDOMAIN** ou dans les **paramètres du domaine personnalisé**. Si vous venez tout juste de mettre en ligne le site, patientez jusqu'à **60 secondes** pour que Square active le **premier accès**.
  </Card>

  ### Le site a mis trop de temps à répondre...

  <Card horizontal>
    Vérifiez que vous avez correctement configuré le **port 80** et l'hôte **0.0.0.0** dans l'application. Nous recommandons d'utiliser les variables d'environnement forcées par Square : **PORT** et **HOST** du fichier `.env`.
  </Card>
</CardGroup>

## Contactez-nous

Si vous rencontrez toujours des **difficultés techniques**, notre **équipe de support spécialisée** est disponible pour vous aider. [**Contactez-nous**](https://squarecloud.app/fr/support) et nous serons ravis de vous aider à résoudre tout problème.