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

> Apprenez à déployer votre application SolidJS 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 SolidJS 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="SolidJS Applications" plan="Standard" tier="4" cpu="4" lang="fr" />

## Créer le projet

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

Pour créer un nouveau projet SolidJS, exécutez la commande suivante :

```bash theme={null}
npm init solid
```

Cette commande vous invitera à sélectionner un modèle, à définir un nom et d'autres configurations pour votre nouveau projet SolidJS.

### Comprendre la différence entre JavaScript et TypeScript

Lorsque vous choisissez JavaScript, Solid configure le projet avec les paramètres JavaScript par défaut. En revanche, lorsque vous choisissez TypeScript, Solid configure le projet avec les paramètres TypeScript, y compris la génération d'un fichier `tsconfig.json`.

## Compiler le projet

Avant l'envoi en production, générez les artefacts de production à l'aide de la commande de compilation :

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

Cette commande compilera votre application et créera une version prête pour la production. La sortie dépendra du modèle ou de l'outil de compilation que vous avez sélectionné lors de la création du projet.

## Déploiement

Si vous utilisez Vite comme outil de compilation, consultez le [tutoriel Vite](../vite#choosing-a-production-server) pour plus de détails sur le service de la compilation de production.\
Si vous utilisez vinxi comme outil de compilation, il est fourni avec un serveur intégré pour servir la compilation de production. Vous pouvez démarrer le serveur en modifiant le script `start` dans votre fichier `package.json` par :

```json theme={null}
"scripts": {
  "start": "vinxi start --port 80"
}
```

Ensuite, vous pouvez définir la commande **START** suivante pour démarrer le serveur :

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

<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 Solid et ses outils, consultez la [documentation officielle de Solid](https://docs.solidjs.com/quick-start). Vous y trouverez des guides détaillés, des tutoriels et une documentation d'API pour tirer le meilleur parti de Solid.

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