# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configurer une SPA React avec Vite
URL: https://generaltranslation.com/fr/docs/react/guides/spa/configuring-vite-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment configurer gt-react dans une application React monopage propulsée par Vite.

Configurez le runtime de l’application et incluez éventuellement les catalogues de traduction générés dans votre build Vite.

Ce guide prépare le runtime de l’application. Marquez séparément le contenu destiné aux utilisateurs en vue de sa traduction.

## Configuration d’une SPA React avec Vite [#setup]

Initialisez `gt-react` avant l’exécution du point d’entrée de l’application.

### 1. Installer gt-react

Installez la dernière version de `gt-react` avec le gestionnaire de paquets privilégié du dépôt. Passez cette étape s’il est déjà installé.

### 2. Ajoutez un fichier `gt.config.json` à la racine du projet

Ajoutez un fichier `gt.config.json` à la racine du projet. Ce fichier contiendra la configuration du paquet `gt-react`.

Les paramètres régionaux déjà présents dans le projet ou fournis à la tâche de configuration prévalent. Préservez les valeurs `locales` et `defaultLocale` existantes. Les valeurs ci-dessous ne sont données qu’à titre d’exemple. Si le projet ne comporte aucune configuration de paramètres régionaux, ne déduisez pas les paramètres régionaux requis à partir de ces exemples.

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "de"]
}
```

Le champ facultatif [`src`](/docs/cli/reference/config#src) indique les fichiers source que GT analyse à la recherche de contenu inline ; s’il est omis, les motifs glob JavaScript et TypeScript suivants sont utilisés par défaut dans `src`, `app`, `pages` et `components` :

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "de"],
  "src": [
    "src/**/*.{js,jsx,ts,tsx}",
    "app/**/*.{js,jsx,ts,tsx}",
    "pages/**/*.{js,jsx,ts,tsx}",
    "components/**/*.{js,jsx,ts,tsx}"
  ]
}
```

### 3. Initialiser la bibliothèque

[`initializeGTSPA`](/docs/react/reference/config#initialize-spa) configure les fonctions de traduction au niveau du module et attend le chargement du catalogue initial. Appelez-la dans un module d’amorçage avant d’importer du code qui traduit au niveau du module.

Créez `src/index.ts` comme fichier d’amorçage, importez le point d’entrée existant `src/main.tsx` après l’initialisation, puis mettez à jour le point d’entrée HTML :

```html title="./index.html"
<!-- <script type="module" src="/src/main.tsx"></script> -->
<script type="module" src="/src/index.ts"></script>
```

Créez `src/index.ts`, puis importez dynamiquement le point d’entrée après avoir initialisé la bibliothèque et chargé les traductions.

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';

await initializeGTSPA(gtConfig);

await import('./main'); // n'affiche l'application qu'une fois que GT est prêt
```

## Chargement des traductions [#translations]

Lorsque [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) est appelé sans fonction [`loadTranslations`](/docs/react/reference/functions/load-translations), le runtime charge les traductions depuis le CDN de General Translation uniquement si un [`projectId`](/docs/react/reference/config#project-id) est disponible. Pour intégrer les catalogues au bundle de l’application, configurez un chemin de sortie et un loader correspondant. Les étapes ci-dessous utilisent `src/_gt/[locale].json`.

### 1. Mettre à jour la configuration

Définissez `files.gt.output` sur l’emplacement où le CLI doit enregistrer les fichiers de traduction générés.

Ajoutez ou fusionnez uniquement le paramètre `files.gt.output`. Préservez les `locales` et le `defaultLocale` existants du projet ; les valeurs indiquées ci-dessous ne sont que des exemples et ne doivent pas remplacer les paramètres régionaux configurés du projet.

Dans une application propulsée par Vite, les traductions sont généralement stockées dans le répertoire `src/_gt`. Cela permet de les utiliser dans le code de l’application.

```json title="gt.config.json"
{
  "locales": ["fr", "zh"],
  "defaultLocale": "en",
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

### 2. Ajoutez les stubs

Créez un fichier JSON vide pour chaque paramètre régional cible déjà configuré dans `gt.config.json`, à l’exception du paramètre régional par défaut. Ces stubs permettent de résoudre les imports avant que les bundles de traduction n’existent. Les fichiers `fr` et `zh` ci-dessous illustrent l’exemple de configuration de ce guide ; créez plutôt des fichiers correspondant aux paramètres régionaux cibles réellement configurés pour le projet. Si aucun paramètre régional cible n’est configuré, n’en inventez pas et ne créez pas de fichiers placeholder.

<Files>
  <Folder name="src">
    <Folder name="_gt">
      <File name="fr.json" />

      <File name="zh.json" />
    </Folder>
  </Folder>
</Files>

```json title="src/_gt/fr.json"
{}
```

```json title="src/_gt/zh.json"
{}
```

### 3. Ajouter le loader

Créez `src/loadTranslations.ts` pour charger les traductions. Il doit résoudre vers le même emplacement de sortie configuré dans `files.gt.output`.

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const translations = await import(`./_gt/${locale}.json`); // doit pointer vers le même emplacement de sortie que celui configuré dans `files.gt.output`
  return translations.default;
}
```

### 4. Mettez à jour l’initialiseur

Mettez à jour l’initialiseur pour utiliser la nouvelle fonction loader.

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

await initializeGTSPA({ ...gtConfig, loadTranslations });

await import('./main'); // affiche l'application seulement une fois que GT est prêt
```

## Next steps

- /docs/react/guides/spa/internationalizing-react-spa
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.