Bereitstellung in der Produktion (5m)

Übersicht

Dies ist ein kurzes Tutorial, das Ihnen hilft, Ihre React-App mit GT bereitzustellen.

Wir werden dies in 3 Schritten tun:

Fügen Sie Ihre Produktions-API-Schlüssel hinzu.

Führen Sie den Befehl gtx-cli configure aus, um Ihr Projekt zu konfigurieren.

Teilen Sie Ihre Konfiguration mit Ihrer App.

Fügen Sie den Übersetzungsbefehl zu Ihrem Build-Skript hinzu.

Voraussetzungen

Stellen Sie sicher, dass Sie dem Schnellstart-Leitfaden gefolgt sind, um Ihre React-App mit GT einzurichten.

Schritt 1: Wechseln Sie zu Ihren Produktions-API-Schlüsseln 🔑

Fügen Sie Ihren Produktions-API-Schlüssel und Ihre Projekt-ID zu Ihren Produktionsumgebungsvariablen hinzu.

Gehen Sie in Ihrem Dashboard in der Seitenleiste zu API-Schlüssel. Klicken Sie auf API-Schlüssel erstellen und fügen Sie sie Ihrer Produktionsumgebung hinzu.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Schützen Sie Ihre API-Schlüssel!

Produktionsschlüssel sollten nur in der Produktion verwendet werden. Ebenso sollten Entwicklungsschlüssel nur in der Entwicklung verwendet werden. Niemals Ihre API-Schlüssel in ein öffentliches Repository einfügen!

Schritt 2: Führen Sie den Befehl `gtx-cli configure` aus 🔧

Führen Sie den Befehl gtx-cli configure aus, um Ihr Projekt zu konfigurieren.

npx gtx-cli configure

Wenn Sie nicht möchten, dass Ihre Übersetzungen auf dem GT CDN gehostet werden, wählen Sie bei der Abfrage "Nein" aus. Sie müssen außerdem die Funktion loadTranslations() konfigurieren.

Schritt 3: Teile deine Konfiguration mit deiner App ⚙️

Der Befehl gtx-cli configure erzeugt eine Konfigurationsdatei im Root-Verzeichnis deines Projekts.

Übergebe die Konfigurationsdatei an <GTProvider>. Falls du bereits irgendwelche Locales in deinem Provider angegeben hast, entferne sie. Die Konfigurationsdatei übernimmt das für dich.

src/App.js

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
import config from "../gt.config.json";  
 
export default function App() {
  return (
    <GTProvider {...config}> 
      <MyApp />
    </GTProvider> 
  );
}

Schritt 4: Fügen Sie den translate-Befehl zu Ihrem Build-Skript hinzu 🏗️

Der letzte Schritt besteht darin, den translate-Befehl zu Ihrem Build-Skript hinzuzufügen. Stellen Sie sicher, dass der translate-Befehl vor dem build-Befehl ausgeführt wird.

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Das war's! Sie sind jetzt bereit, Ihre React-App mit GT zu deployen!

Nächste Schritte

Siehe die CLI-Dokumentation für weitere Informationen zum CLI-Tool.
Erfahre, wie du Strings übersetzen kannst.
Lerne mehr über die <T> Komponente.