Bereitstellung in der Produktion (5m)

Überblick

Dies ist ein kurzes Tutorial, um Ihnen bei der Bereitstellung Ihrer React-App mit GT zu helfen.

Wir werden dies in 3 Schritten tun:

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

Führen Sie den init-Befehl aus, um Ihr Projekt zu konfigurieren.

Teilen Sie Ihre Konfiguration mit Ihrer App.

Fügen Sie den translate-Befehl 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 init-Befehl aus 🔧

Führen Sie den init-Befehl aus, um Ihr Projekt zu konfigurieren.

npx gtx-cli init

Wenn Sie nicht möchten, dass Ihre Übersetzungen auf dem GT CDN gehostet werden, wählen Sie "Local", wenn Sie gefragt werden, wo Ihre Sprachdateien gespeichert sind. Sie müssen auch die loadTranslations() Funktion konfigurieren.

Schritt 3: Teilen Sie Ihre Konfiguration mit Ihrer App ⚙️

Der init-Befehl generiert eine Konfigurationsdatei im Stammverzeichnis.

Übergeben Sie die Konfigurationsdatei an <GTProvider>. Wenn Sie Gebietsschemas in Ihrem Provider angegeben haben, entfernen Sie diese. Die Konfigurationsdatei kümmert sich darum.

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 ist, den translate-Befehl zu Ihrem Build-Skript hinzuzufügen. Stellen Sie sicher, dass der translate-Befehl vor dem Build-Befehl steht.

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.