# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configuración de una SPA de React con Rollup
URL: https://generaltranslation.com/es/docs/react/guides/spa/configuring-rollup-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 Rollup.

Configura el entorno de ejecución de la aplicación e incluye opcionalmente los catálogos de traducción generados en tu compilación de Rollup.

Esta guía prepara el entorno de ejecución de la aplicación. Marca por separado el contenido de cara al usuario para su traducción.

## Configuración de una SPA de React con Rollup [#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 lo has instalado, omite este paso.

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

Agrega 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 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 de origen que GT analiza para detectar 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

Inicializa la biblioteca con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) antes de que la aplicación se renderice o importe módulos que utilicen funciones de traducción de nivel de módulo.

Crea un archivo de arranque junto al archivo de entrada existente de la aplicación. En este ejemplo, el archivo de entrada original es `src/main.tsx` y el nuevo archivo de arranque es `src/index.ts`. Configura la opción `input` existente de Rollup para que apunte al archivo de arranque. Conserva el resto de la configuración de compilación.

El archivo de arranque y el cargador de traducciones importan archivos JSON. Si el proyecto aún no tiene configurada la compatibilidad con módulos JSON, instala `@rollup/plugin-json` como dependencia de desarrollo con el administrador de paquetes preferido del repositorio y agrégalo a la lista de plugins existente. Conserva todos los plugins existentes y su configuración.

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

export default {
  // ...las opciones existentes del proyecto
  input: 'src/index.ts',
  plugins: [
    // ...los plugins existentes del proyecto
    json(),
  ],
};
```

Si el HTML de desarrollo hace referencia directamente a la entrada de origen, actualízalo también:

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

Luego, inicializa GT e importa dinámicamente la entrada original solo cuando finalice la inicialización. La aplicación de referencia de Rollup genera ESM y admite `await` de nivel superior:

```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
```

Si el formato de salida o el destino actuales de Rollup no admiten `top-level await`, no los modifiques solo por esta configuración. Usa en su lugar una función de inicialización asíncrona:

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

## 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 entorno de ejecución 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, configure una ruta de salida y un cargador que coincida. Los pasos siguientes usan `src/_gt/[locale].json`.

### 1. Actualiza la configuración

Establece `files.gt.output` en la ubicación donde el CLI debe escribir los archivos de traducción generados.

Solo agrega o combina la configuración `files.gt.output`. Conserva los valores de `locales` y `defaultLocale` ya configurados en el proyecto; los valores que se muestran a continuación siguen siendo ejemplos y no deben reemplazar los locales configurados del proyecto.

Normalmente, en una aplicación basada en Rollup, las traducciones se almacenarán en el directorio `src/_gt`. Esto permite que Rollup incluya los módulos de traducción en el bundle de la aplicación.

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

### 2. Añade los archivos de reserva

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 de reserva 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. Agrega el cargador

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

Enumera explícitamente cada configuración regional de destino en `translationLoaders`. Cada cargador debe usar una ruta de importación literal para que Rollup pueda detectar y generar cada archivo de traducción durante la compilación. Las entradas `fr` y `zh` siguientes corresponden a la configuración de ejemplo de esta guía; usa en su lugar las configuraciones regionales de destino configuradas en tu proyecto.

```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. Actualiza el inicializador

Actualiza el inicializador para usar la nueva función de carga. Conserva la forma de arranque que use la aplicación: con `await` de nivel superior o con una función asíncrona.

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