# General Translation React SDKs (gt-react, gt-next, gt-react-native): Développer avec les traductions SPA
URL: https://generaltranslation.com/fr/docs/react/guides/developing-spa-translations.mdx
---

title: Développer avec les traductions SPA
description: Comment prévisualiser les traductions de General Translation lors du développement d’une application React monopage.
related:
  links:
    - /docs/react/guides/storing-translations
    - /docs/react/guides/configuring
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/managing-locales

---

Les traductions de développement vous permettent de prévisualiser le contenu traduit pendant que vous modifiez votre SPA. Elles nécessitent le compilateur GT et une clé API de développement.

**Prérequis :**

* Une application React monopage configurée avec le [SPA Quickstart](/docs/react/react-spa-quickstart)
* Une clé API de développement commençant par `gtx-dev-`

<Callout type="warn">
  **Limitation de CommonJS :** Le rechargement à chaud en développement nécessite ESM, car le compilateur injecte `await` au niveau supérieur. Cela ne fonctionne pas dans les applications compilées en CommonJS. Les traductions de production continuent toutefois de fonctionner avec le modèle de démarrage CommonJS du [SPA Quickstart](/docs/react/react-spa-quickstart).
</Callout>

## Configuration [#setup]

### 1. Installer le compilateur

Installez `@generaltranslation/compiler` en tant que dépendance de développement :

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i -D @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

### 2. Ajouter le plugin du compilateur

Activez le hot reload en développement dans la configuration partagée par le CLI et le compilateur :

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json",
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}
```

Ajoutez ensuite le plugin pour votre bundler.

<Tabs items={['Vite', 'webpack', 'Rollup', 'Rspack', 'esbuild']}>
  <Tab value="Vite">
    ```ts title="vite.config.ts"
    import react from '@vitejs/plugin-react';
    import { vite as gtCompiler } from '@generaltranslation/compiler'; // [!code highlight]
    import { defineConfig } from 'vite';
    import gtConfig from './gt.config.json'; // [!code highlight]

    export default defineConfig({
      plugins: [react(), gtCompiler({ ...gtConfig })], // [!code highlight]
    });
    ```
  </Tab>

  <Tab value="webpack">
    Installez `dotenv` comme dépendance de développement pour que webpack puisse lire `.env` et `.env.local`, puis ajoutez le compilateur avant les autres plugins. Utilisez `DefinePlugin` pour n&#39;exposer au code exécuté dans le navigateur que les identifiants de développement :

    ```js title="webpack.config.mjs"
    import { webpack as gtCompiler } from '@generaltranslation/compiler';
    import dotenv from 'dotenv';
    import webpack from 'webpack';
    import gtConfig from './gt.config.json' with { type: 'json' };

    dotenv.config({ path: '.env' });
    dotenv.config({ path: '.env.local', override: true });

    export default (_env, argv) => {
      const isProduction = (argv.mode ?? 'production') === 'production';

      return {
        // Conservez vos paramètres webpack existants.
        plugins: [
          gtCompiler({ ...gtConfig }),
          new webpack.DefinePlugin({
            'process.env.GT_PROJECT_ID': JSON.stringify(
              isProduction ? '' : (process.env.GT_PROJECT_ID ?? '')
            ),
            'process.env.GT_DEV_API_KEY': JSON.stringify(
              isProduction ? '' : (process.env.GT_DEV_API_KEY ?? '')
            ),
          }),
        ],
      };
    };
    ```

    Consultez l&#39;[exemple webpack complet de `gt-react`](https://github.com/generaltranslation/gt/tree/main/examples/webpack-spa) pour les loaders, les fichiers de traduction locaux et la configuration du serveur de développement.
  </Tab>

  <Tab value="Rollup">
    Enregistrez le compilateur avant vos autres plugins Rollup :

    ```js title="rollup.config.mjs"
    import { rollup as gtCompiler } from '@generaltranslation/compiler';

    export default {
      input: 'src/index.ts',
      plugins: [
        gtCompiler(),
        // Vos autres plugins Rollup
      ],
    };
    ```

    Rollup ne peut pas analyser un import de traduction entièrement dynamique. Listez chaque paramètre régional avec un spécificateur d&#39;import statique :

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

    export default async function loadTranslations(locale: string) {
      const loader =
        translationLoaders[locale as keyof typeof translationLoaders];
      return loader ? (await loader()).default : {};
    }
    ```

    Rollup seul ne fournit pas l&#39;intégration des identifiants de développement présentée pour Vite et webpack. Régénérez les fichiers de traduction locaux lorsque le contenu source change. Consultez l&#39;[exemple Rollup complet de `gt-react`](https://github.com/generaltranslation/gt/tree/main/examples/rollup-spa).
  </Tab>

  <Tab value="Rspack">
    Ajoutez l&#39;adaptateur Rspack à vos plugins :

    ```js title="rspack.config.mjs"
    import { rspack as gtCompiler } from '@generaltranslation/compiler';

    export default {
      plugins: [gtCompiler()],
    };
    ```

    La traduction de développement nécessite également d&#39;exposer `GT_PROJECT_ID` et `GT_DEV_API_KEY` au code exécuté dans le navigateur sans inclure ces valeurs dans les bundles de production.
  </Tab>

  <Tab value="esbuild">
    Ajoutez l&#39;adaptateur esbuild au tableau `plugins` :

    ```js title="build.mjs"
    import { build } from 'esbuild';
    import { esbuild as gtCompiler } from '@generaltranslation/compiler';

    await build({
      entryPoints: ['src/index.tsx'],
      bundle: true,
      outdir: 'dist',
      plugins: [gtCompiler()],
    });
    ```

    *Remarque : l&#39;adaptateur esbuild ne prend pas en charge l&#39;injection JSX automatique. Encapsulez explicitement le JSX traduisible ou utilisez un autre adaptateur lorsque `enableAutoJsxInjection` est requis.*
  </Tab>
</Tabs>

Consultez l&#39;[exemple Vite complet de `gt-react`](https://github.com/generaltranslation/gt/tree/main/examples/vite-spa) pour une configuration Vite complète.

### 3. Ajoutez les identifiants de développement

Obtenez une clé API de développement sur [dash.generaltranslation.com](https://dash.generaltranslation.com/en-US/signin) ou en exécutant :

```bash
npx gt auth
```

Ajoutez ensuite votre ID de projet et votre clé API de développement à `.env.local`, puis transmettez-les à votre fonction d&#39;initialisation :

<Tabs items={['Vite', 'webpack']}>
  <Tab value="Vite">
    ```bash title=".env.local"
    VITE_GT_PROJECT_ID="your-project-id"
    VITE_GT_DEV_API_KEY="your-dev-api-key"
    ```

    ```ts
    await initializeGTSPA({
      ...gtConfig,
      projectId: import.meta.env.VITE_GT_PROJECT_ID,
      devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
      loadTranslations,
    });
    ```
  </Tab>

  <Tab value="webpack">
    ```bash title=".env.local"
    GT_PROJECT_ID="your-project-id"
    GT_DEV_API_KEY="your-dev-api-key"
    ```

    ```ts
    await initializeGTSPA({
      ...gtConfig,
      projectId: process.env.GT_PROJECT_ID,
      devApiKey: process.env.GT_DEV_API_KEY,
      loadTranslations,
    });
    ```

    La configuration webpack ci-dessus remplace les deux valeurs par des chaînes vides dans les builds de production, afin que les identifiants de développement ne soient pas inclus dans le bundle de production.
  </Tab>
</Tabs>

<Callout type="warn">
  **Développement uniquement :** utilisez une clé commençant par `gtx-dev-`. N&#39;exposez jamais une clé de production commençant par `gtx-api-` dans le code du navigateur.
</Callout>

### 4. Commencez à développer

Démarrez votre serveur de développement et passez à un paramètre régional autre que le paramètre régional par défaut. Lorsque vous modifiez du contenu à traduire, le compilateur enregistre la modification et `gt-react` demande une traduction de développement mise à jour.
## Next steps

- /docs/react/guides/storing-translations
- /docs/react/guides/configuring
- /docs/react/guides/translating-jsx
- /docs/react/guides/managing-locales