# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configuration d’une SPA Rollup
URL: https://generaltranslation.com/fr/docs/react/guides/spa/configuring-rollup-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment configurer gt-react dans une application React monopage basée sur Rollup.

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

Ce guide prépare le runtime de l’application. Marquez séparément le contenu destiné aux utilisateurs à traduire.

## Configuration d’une SPA React avec Rollup [#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. S’il est déjà installé, ignorez cette étape.

### 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à définis dans le projet ou fournis à la tâche de configuration font foi. Préservez les valeurs existantes de `locales` et de `defaultLocale`. Les valeurs ci-dessous sont données à titre d’exemple uniquement. 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 sources que GT analyse pour y rechercher du 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

Initialisez la bibliothèque avec [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) avant que l’application ne s’affiche ou n’importe des modules utilisant des fonctions de traduction au niveau du module.

Créez un fichier d’amorçage à côté du fichier d’entrée existant de l’application. Dans cet exemple, le point d’entrée d’origine est `src/main.tsx` et le nouveau fichier d’amorçage est `src/index.ts`. Faites pointer la configuration `input` existante de Rollup vers le fichier d’amorçage. Préservez tous les autres paramètres de build.

Le fichier d’amorçage et le loader de traduction importent des fichiers JSON. Si le projet ne prend pas déjà en charge les modules JSON, installez `@rollup/plugin-json` en tant que dépendance de développement avec le gestionnaire de paquets privilégié du dépôt et ajoutez-le à la liste de plugins existante. Préservez tous les plugins existants et leur configuration.

```js title="rollup.config.mjs"
import json from '@rollup/plugin-json';

export default {
  // ...les options existantes du projet
  input: 'src/index.ts',
  plugins: [
    // ...les plugins existants du projet
    json(),
  ],
};
```

Si le code HTML de développement fait directement référence à l’entrée source d’origine, mettez-le également à jour :

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

Initialisez ensuite GT, puis importez dynamiquement l’entrée d’origine uniquement une fois l’initialisation terminée. L’application de référence Rollup produit des modules ESM et prend en charge `await` au niveau supérieur :

```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 GT prêt
```

Si le format de sortie ou la cible Rollup existants ne prennent pas en charge `await au niveau supérieur`, ne les modifiez pas uniquement pour cette configuration. Utilisez plutôt une fonction d’amorçage `async` :

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

async function bootstrap() {
  await initializeGTSPA(gtConfig);
  await import('./main');
}

void bootstrap();
```

## 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 inclure les catalogues dans le bundle de l’application, configurez un chemin de sortie et un loader associé. 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 écrire les fichiers de traduction générés.

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

En général, dans une application basée sur Rollup, les traductions sont stockées dans le répertoire `src/_gt`. Cela permet à Rollup d’inclure les modules de traduction dans le bundle de l’application.

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

### 2. Ajouter les fichiers 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 fichiers stubs permettent de résoudre les imports avant que les bundles de traduction n’existent. Les fichiers `fr` et `zh` ci-dessous illustrent la configuration utilisée comme exemple dans ce guide ; créez plutôt des fichiers pour les paramètres régionaux cibles réellement configurés dans le projet. Si aucun paramètre régional cible n’est configuré, n’inventez pas de paramètres régionaux 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. Ajoutez le loader

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

Indiquez explicitement chaque paramètre régional cible configuré dans `translationLoaders`. Chaque loader doit utiliser un chemin d’import littéral afin que Rollup puisse détecter et générer chaque fichier de traduction au build. Les entrées `fr` et `zh` ci-dessous correspondent à l’exemple de configuration de ce guide ; utilisez plutôt les paramètres régionaux cibles réellement configurés dans le projet.

```ts title="src/loadTranslations.ts"
const translationLoaders = {
  fr: () => import('./_gt/fr.json'),
  zh: () => import('./_gt/zh.json'),
};

export default async function loadTranslations(locale: string) {
  try {
    const loader =
      translationLoaders[locale as keyof typeof translationLoaders];
    if (!loader) {
      console.warn(`No translations found for locale "${locale}"`);
      return {};
    }
    const translations = await loader();
    return translations.default;
  } catch (error) {
    console.warn(`No translations found for locale "${locale}"`, error);
    return {};
  }
}
```

### 4. Mettre à jour l’initialiseur

Mettez à jour l’initialiseur pour utiliser la nouvelle fonction loader. Préservez la forme d’amorçage existante, avec await au niveau supérieur ou une fonction asynchrone.

```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');
```

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