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

# So hostest du Gatsby-Anwendungen

> Lerne, wie du deine Gatsby-Anwendung auf Square Cloud bereitstellst.

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 = "eine Gatsby-Anwendung"

## Einführung

Um {appType_0} auf Square Cloud zu entwickeln und zu hosten, ist es wichtig, einer strukturierten Abfolge von Konfigurationen und Voraussetzungen zu folgen. Dieser technische Leitfaden deckt den gesamten Prozess ab, von der anfänglichen Einrichtung bis zum Produktions-Deployment.

### Voraussetzungen

* **Square Cloud Konto**: Registriere dich über die [Registrierungsseite](https://squarecloud.app/de/signup) mit deiner E-Mail-Adresse.
* **Aktiver kostenpflichtiger Plan**: Stellt dedizierte Ressourcen und optimierte Leistung für deine Anwendung sicher. Sieh dir unsere [verfügbaren Pläne](https://squarecloud.app/de/pricing) an und wähle den passendsten für deine Bedürfnisse.

<RecommendedPlan appType="Gatsby-Anwendungen" plan="Standard" tier="4" cpu="4" lang="de" />

## Projekt erstellen

Stelle vor dem Start sicher, dass **Node.js (>=20)** und **npm** auf deinem System installiert sind.
Falls du sie noch nicht hast, lade sie von der offiziellen [Node.js](https://nodejs.org/)-Website herunter.\
Initialisiere ein neues Gatsby-Projekt mit dem offiziellen Initializer:

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

Folge den Anweisungen, um einen Starter und Optionen (TypeScript, Tailwind usw.) auszuwählen.

### Abhängigkeiten installieren

Wechsle nach der Erstellung in das Projektverzeichnis und installiere die Abhängigkeiten:

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

### Projekt entwickeln

Starte den Entwicklungsserver:

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

Der Entwicklungsserver von Gatsby läuft typischerweise unter `http://localhost:8000`.

Um eine einfache Seite zu erzeugen, füge `src/pages/index.js` mit folgendem Inhalt hinzu:

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

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

## Projekt bauen

Erzeuge die Produktionsausgabe vor dem Hochladen:

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

Gatsby erzeugt die statische Ausgabe standardmäßig im Ordner `public/`.

## Einen Produktionsserver auswählen

Um deine Gatsby-Anwendung in der Produktion auszuliefern, benötigst du einen Server. Du kannst einen eigenen erstellen oder vorhandene verwenden.

### SSR

Für SSR-Builds, die ein Server-Bundle erzeugen, konfigurierst du einfach die Hauptdatei auf `server.js`

### Express-Bibliothek

Um dein statisches Projekt auf Square Cloud bereitzustellen, stelle sicher, dass dein Server statische Dateien korrekt ausliefert. Um Node.js mit Express zu verwenden, ist ein gängiges Setup:

```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>Passe die `dist` Pfadparameter an den Build-Ordner deines Projekts an. Wenn er sich in einem Ordner innerhalb von `build` oder `dist` befindet, verwende stattdessen dessen Pfad.</Note>

### Serve-Bibliothek

#### Die Serve-Bibliothek installieren

Um die `serve`-Bibliothek zu installieren, navigieren Sie im Terminal in Ihr Projektverzeichnis und führen Sie den folgenden Befehl aus:

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

Dieser Befehl installiert Version `14.2.3` der `serve`-Bibliothek. Wenn Sie die aktuellste Version installieren möchten, können Sie das `@14.2.3` weglassen.

#### Das Startskript konfigurieren

Nachdem Sie die `serve`-Bibliothek installiert haben, müssen Sie das Startskript Ihres Projekts so konfigurieren, dass es `serve` verwendet. Öffnen Sie dazu die `package.json`-Datei Ihres Projekts und fügen Sie ein neues Skript namens `start:prod` hinzu:

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

Im `start:prod`-Skript bewirkt `serve -s build -l 80` Folgendes:

* `serve`: Dies ist der Befehl, um den `serve`-Server zu starten.
* `-s dist`: Die Option `-s` stellt das Verzeichnis `dist` im Single-Page-Application-Modus bereit. Das bedeutet, dass alle nicht gefundenen Anfragen zu `index.html` umgeleitet werden. Das Verzeichnis `dist` wird üblicherweise erstellt, wenn Sie `npm run build` ausführen.
* `-l 80`: Die Option `-l` gefolgt von `80` weist `serve` an, auf Port 80 zu lauschen. Port 80 ist der Standardport für HTTP-Verkehr.

<Note>Passen Sie den Parameter `dist` an den Build-Ordner Ihres Projekts an. Wenn er sich in einem Ordner innerhalb von `build` oder `dist` befindet, verwenden Sie stattdessen dessen Pfad.</Note>

## Bereitstellen

Nachdem du deine Projektdateien vorbereitet hast, kannst du sie nun auf Square Cloud hochladen und dein Projekt hosten.
Erstelle dazu eine ZIP-Datei, die alle deine Projektdateien enthält.

<PortNote lang="de" />

### Über das Dashboard

<Steps>
  <Step title="Upload-Seite aufrufen">
    Rufe die [Upload-Seite](https://squarecloud.app/de/dashboard/new) auf und lade die ZIP-Datei deines Projekts hoch.
  </Step>

  <Step title="Umgebung konfigurieren">
    Nachdem du deine ZIP-Datei hochgeladen hast, musst du den Namen, die Hauptdatei oder Runtime-Umgebung und weitere Einstellungen für dein Projekt konfigurieren.\
    Wenn du ein Web-Projekt hochlädst, achte darauf, "Web Publication" auszuwählen und deinem Projekt eine Subdomain zuzuweisen.
  </Step>

  <Step title="Projekt bereitstellen">
    Klicke abschließend auf die Schaltfläche "Deploy", um dein Projekt auf Square Cloud zu hosten.\
    Nach dem Deploy kannst du den Status und die Logs deines Projekts über das Dashboard überwachen.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Anwendung wird auf Square Cloud hochgeladen" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### Über die CLI

Um diese Methode zu nutzen, musst du eine Konfigurationsdatei mit dem Namen `squarecloud.app` im Stammverzeichnis deines Projekts erstellen. Diese Datei enthält die notwendige Konfiguration für dein Projekt.

<Card title="Mehr erfahren: So erstellst du die Konfigurationsdatei für Square Cloud." icon="link" href="/de/getting-started/config-file">
  Die Datei squarecloud.app ist eine Konfigurationsdatei, mit der deine Anwendung konfiguriert wird; sie dient dazu, deine Umgebung zu definieren.
</Card>

<Steps>
  <Step title="CLI installieren">
    Zuerst musst du die CLI in deiner Umgebung installiert haben. Falls du sie noch nicht hast, führe den folgenden Befehl in deinem Terminal aus:

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

    Falls du sie bereits hast, empfehlen wir, sie zu aktualisieren. Führe dazu den folgenden Befehl in deinem Terminal aus:

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

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

  <Step title="Authentifizieren">
    Um dich zu authentifizieren und weitere CLI-Befehle zu nutzen, findest du deinen Autorisierungsschlüssel [hier](https://squarecloud.app/de/account/security), indem du auf "Request API Key" klickst. Nachdem du deinen Autorisierungsschlüssel erhalten hast, führe den folgenden Befehl aus:

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

  <Step title="Projekt hochladen">
    Um deine Anwendung schließlich über die CLI auf Square Cloud bereitzustellen, musst du den folgenden Befehl ausführen:

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

    Oder falls du die ZIP-Datei manuell erstellt hast, kannst du Folgendes verwenden:

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

## Weitere Ressourcen

Weitere Informationen über Gatsby findest du in der offiziellen Dokumentation [hier](https://www.gatsbyjs.com/docs/).

## Fehlerbehebung

<CardGroup cols={1}>
  ### Eigene Domain

  <Card horizontal>
    Um eine eigene Domain (z. B. `mysite.com`) anstelle der Standard-URL `mysite.squareweb.app` zu verwenden, benötigst du den **Standard-Plan oder höher**. Die Subdomain wird über das Feld **SUBDOMAIN** in der Konfigurationsdatei festgelegt.
  </Card>

  ### Mindestanforderungen an den Arbeitsspeicher

  <Card horizontal>
    **Minimum: 512MB RAM** für einfache Websites/APIs. Für Seiten mit Frameworks (Next.JS, React, Vue, Angular usw.) empfehlen wir stets **mindestens 1GB RAM**. Für größere Anwendungen solltest du mehr RAM zuweisen, damit der Anwendung nicht der Speicher ausgeht und sie abstürzt.
  </Card>

  ### Diese Seite konnte nicht gefunden werden.

  <Card horizontal>
    Prüfe, ob die **Subdomain/Domain** mit dem übereinstimmt, was im Feld **SUBDOMAIN** oder in den **Einstellungen der eigenen Domain** konfiguriert ist. Wenn du die Seite gerade erst hochgeladen hast, warte bis zu **60 Sekunden**, bis Square den **ersten Zugriff** aktiviert.
  </Card>

  ### Die Seite hat zu lange zum Antworten gebraucht...

  <Card horizontal>
    Prüfe, ob du in der Anwendung **Port 80** und **Host 0.0.0.0** korrekt konfiguriert hast. Wir empfehlen die Verwendung der von Square erzwungenen Umgebungsvariablen: **PORT** und **HOST** aus der `.env`-Datei.
  </Card>
</CardGroup>

## Kontaktiere uns

Falls du weiterhin **technische Schwierigkeiten** hast, steht dir unser **spezialisiertes Support-Team** zur Verfügung. [**Kontaktiere uns**](https://squarecloud.app/de/support) und wir helfen dir gerne, jedes Problem zu lösen.