Déploiement en Production (5m)

Déployons votre application React avec GT.

Aperçu

Voici un court tutoriel pour vous aider à déployer votre application react avec GT.

Nous allons le faire en 3 étapes :

Ajoutez vos clés API de production.

Exécutez la commande gtx-cli configure pour configurer votre projet.

Partagez votre configuration avec votre application.

Ajoutez la commande translate à votre script de build.

Prérequis

Assurez-vous d'avoir suivi le Guide de démarrage rapide pour configurer votre application React avec GT.

Étape 1 : Passez à vos clés API de production 🔑

Ajoutez votre clé API de production et l'ID de projet à vos variables d'environnement de production.

Depuis votre tableau de bord, allez à Clés API dans la barre latérale. Cliquez sur Créer une clé API, et ajoutez-les à votre environnement de production.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Protégez vos clés API !

Les clés de production doivent uniquement être utilisées en production. De même, les clés de développement doivent uniquement être utilisées en développement. Ne commettez jamais vos clés API dans un dépôt public !

Étape 2 : Exécutez la commande gtx-cli configure 🔧

Exécutez la commande gtx-cli configure pour configurer votre projet.

npx gtx-cli configure

Si vous ne souhaitez pas que vos traductions soient hébergées sur le GT CDN, sélectionnez "Non" lorsque cela vous est demandé. Vous devrez également configurer la fonction loadTranslations().

Étape 3 : Partagez votre configuration avec votre application ⚙️

La commande gtx-cli configure va générer un fichier de configuration à la racine de votre projet.

Transmettez le fichier de configuration à <GTProvider>. Si vous avez spécifié des locales dans votre provider, retirez-les. Le fichier de configuration s'en chargera.

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> 
  );
}

Étape 4 : Ajoutez la commande translate à votre script de build 🏗️

La dernière étape consiste à ajouter la commande translate à votre script de build. Assurez-vous que la commande translate soit placée avant la commande build.

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

Et voilà ! Vous êtes maintenant prêt à déployer votre application react avec GT !


Prochaines étapes

Sur cette page