# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configuración de una SPA con Vite
URL: https://generaltranslation.com/es/docs/react/guides/spa/configuring-vite-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo configurar gt-react en una aplicación React de una sola página con Vite.

Configura el tiempo de ejecución de la aplicación y, opcionalmente, incluye los catálogos de traducción generados en tu compilación de Vite.

Esta guía prepara el runtime de la aplicación. Marca por separado el contenido de cara al usuario para traducirlo.

## Configuración de una SPA de React con Vite [#setup]

Inicializa `gt-react` antes de que se ejecute el punto de entrada de la aplicación.

### 1. Instala gt-react

Instala la versión más reciente de `gt-react` con el administrador de paquetes preferido del repositorio. Si ya está instalado, omite este paso.

### 2. Añade un archivo `gt.config.json` en la raíz del proyecto

Añade un archivo `gt.config.json` en la raíz del proyecto. Este archivo contendrá la configuración del paquete `gt-react`.

Las configuraciones regionales ya presentes en el proyecto o proporcionadas a la tarea de configuración son las que prevalecen. Conserva los valores existentes de `locales` y `defaultLocale`. Los valores siguientes son solo ejemplos. Si el proyecto no tiene una configuración regional, no deduzcas los requisitos de configuración regional a partir de estos ejemplos.

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

El campo opcional [`src`](/docs/cli/reference/config#src) especifica los archivos fuente que GT analiza en busca de contenido inline; si se omite, se usan de forma predeterminada estos patrones glob de JavaScript y TypeScript en `src`, `app`, `pages` y `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. Inicializa la biblioteca

[`initializeGTSPA`](/docs/react/reference/config#initialize-spa) configura las funciones de traducción de nivel de módulo y espera a que se cargue el catálogo inicial. Llámala en un módulo de arranque antes de importar código que traduzca en el ámbito del módulo.

Crea `src/index.ts` como archivo de arranque, importa el punto de entrada existente `src/main.tsx` después de la inicialización y actualiza la entrada HTML:

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

Crea `src/index.ts` y luego importa dinámicamente el punto de entrada después de que la biblioteca se inicialice y cargue las traducciones.

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

await initializeGTSPA(gtConfig);

await import('./main'); // renderiza la aplicación solo cuando GT esté listo
```

## Carga de traducciones [#translations]

Cuando se llama a [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) sin una función [`loadTranslations`](/docs/react/reference/functions/load-translations), el runtime carga las traducciones desde la CDN de General Translation únicamente cuando hay un [`projectId`](/docs/react/reference/config#project-id) disponible. Para incluir catálogos en el bundle de la aplicación, configura una ruta de salida y un cargador correspondiente. Los siguientes pasos usan `src/_gt/[locale].json`.

### 1. Actualiza la configuración

Configura `files.gt.output` con la ubicación donde la CLI debe escribir los archivos de traducción generados.

Solo agrega o combina la configuración `files.gt.output`. Conserva los `locales` y `defaultLocale` existentes del proyecto; los valores que se muestran a continuación son solo ejemplos y no deben sustituir los locales configurados del proyecto.

Normalmente, en una aplicación con Vite, las traducciones se almacenarán en el directorio `src/_gt` para poder usarlas en el código de la aplicación.

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

### 2. Agrega los archivos auxiliares

Crea un archivo JSON vacío para cada configuración regional de destino ya configurada en `gt.config.json`, excepto la configuración regional predeterminada. Estos archivos auxiliares permiten resolver las importaciones antes de que existan los paquetes de traducción. Los archivos `fr` y `zh` que se muestran a continuación ilustran la configuración de ejemplo de esta guía; crea archivos para las configuraciones regionales de destino configuradas realmente en el proyecto. Si no hay configuraciones regionales de destino configuradas, no inventes configuraciones regionales ni crees archivos de marcador de posición.

<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. Añade el cargador

Crea `src/loadTranslations.ts` para cargar las traducciones. Debe devolver la misma ubicación de salida configurada en `files.gt.output`.

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const translations = await import(`./_gt/${locale}.json`); // debe apuntar a la misma ubicación de salida configurada en `files.gt.output`
  return translations.default;
}
```

### 4. Actualiza el inicializador

Actualiza el inicializador para usar la nueva función de cargador.

```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'); // renderiza la aplicación solo después de que GT esté listo
```

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