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

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

## Création du projet

Avant de commencer, assurez-vous d'avoir **Node.js (>=20)** et **npm** installés sur votre système.
Si vous ne les avez pas encore, téléchargez-les depuis le site officiel de [Node.js](https://nodejs.org/).\
Initialisez un nouveau projet Gatsby à l'aide de l'initialiseur officiel :

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

Suivez les instructions pour choisir un starter et des options (TypeScript, Tailwind, etc.).

### Installation des dépendances

Après la création, entrez dans le répertoire du projet et installez les dépendances :

```bash theme={null}
cd my-gatsby-site
npm install
```

### Développement du projet

Démarrez le serveur de développement :

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

Le serveur de développement de Gatsby s'exécute généralement à l'adresse `http://localhost:8000`.

Pour générer une page simple, ajoutez `src/pages/index.js` avec :

```jsx theme={null}
import * as React from 'react'

export default function Index() {
  return <h1>Hello from Gatsby!</h1>
}
```

## Compilation du projet

Compilez la sortie de production avant l'envoi :

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

Gatsby génère par défaut la sortie statique dans le dossier `public/`.

## Choisir un serveur de production

Pour servir votre application Gatsby en production, vous devez utiliser un serveur. Vous pouvez créer le vôtre ou utiliser ceux qui existent déjà.

### SSR

Pour les builds SSR qui émettent un bundle serveur, configurez simplement le fichier principal sur `server.js`

### Bibliothèque Express

Pour servir votre projet statique sur Square Cloud, assurez-vous que votre serveur délivre correctement les fichiers statiques. Pour utiliser Node.js avec Express, une configuration courante est :

```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>Ajustez les paramètres de chemin `dist` en fonction du dossier de build de votre projet. S'il se trouve dans un dossier à l'intérieur de `build` ou `dist`, utilisez plutôt ce chemin.</Note>

### Bibliothèque Serve

#### Installation de la bibliothèque Serve

Pour installer la bibliothèque `serve`, accédez au répertoire de votre projet dans le terminal et exécutez la commande suivante :

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

Cette commande installe la version `14.2.3` de la bibliothèque `serve`. Si vous souhaitez installer la dernière version, vous pouvez omettre le `@14.2.3`.

#### Configuration du script de démarrage

Après avoir installé la bibliothèque `serve`, vous devez configurer le script de démarrage de votre projet pour utiliser `serve`. Pour ce faire, ouvrez le fichier `package.json` de votre projet et ajoutez un nouveau script nommé `start:prod` :

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

Dans le script `start:prod`, `serve -s build -l 80` réalise les opérations suivantes :

* `serve` : c'est la commande qui démarre le serveur `serve`.
* `-s dist` : l'option `-s` sert le répertoire `dist` en mode application monopage (single-page application). Cela signifie que toutes les requêtes non trouvées seront redirigées vers `index.html`. Le répertoire `dist` est généralement créé lorsque vous exécutez `npm run build`.
* `-l 80` : l'option `-l` suivie de `80` indique à `serve` d'écouter sur le port 80. Le port 80 est le port par défaut pour le trafic HTTP.

<Note>Ajustez le paramètre `dist` selon le dossier de build de votre projet. S'il se trouve dans un dossier à l'intérieur de `build` ou `dist`, utilisez plutôt ce chemin.</Note>

## Déploiement

Après avoir préparé les fichiers de votre projet, vous pouvez désormais 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 Gatsby, consultez la documentation officielle [ici](https://www.gatsbyjs.com/docs/).

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