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

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

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

## Configuración de una SPA de React con webpack [#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. Omite este paso si ya lo has instalado.

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

Añade un archivo `gt.config.json` a 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) indica los archivos de origen 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

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 actual 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 `entry` existente de webpack para que apunte al archivo de arranque. Conserva todos los demás ajustes de compilación y cualquier estructura de objeto de entrada existente.

```js title="webpack.config.mjs"
export default {
  // ...las opciones existentes del proyecto
  entry: './src/index.ts',
};
```

webpack suele insertar la entrada compilada en el HTML mediante `HtmlWebpackPlugin`, así que no añadas una segunda etiqueta `script` si el proyecto ya usa un plugin HTML. Si el HTML hace referencia directamente a la entrada de origen original, actualiza esa referencia para que apunte al archivo de arranque.

A continuación, inicializa GT e importa dinámicamente la entrada original solo cuando haya finalizado la inicialización. La aplicación de referencia de webpack 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 destino de compilación actual de webpack no admite `await` de nivel superior, no lo cambies solo para 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 solo 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 el cargador correspondiente. En los pasos siguientes se usa `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 fusiona la configuración `files.gt.output`. Conserva los valores existentes de `locales` y `defaultLocale` del proyecto; los valores que se muestran a continuación son solo ejemplos y no deben reemplazar las configuraciones regionales del proyecto.

Normalmente, en una aplicación basada en webpack, las traducciones se almacenarán en el directorio `src/_gt`. Esto permite que webpack 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. Agrega los archivos provisionales

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 provisionales permiten resolver las importaciones antes de que existan los bundles de traducción. Los archivos `fr` y `zh` que aparecen a continuación ilustran la configuración de ejemplo de esta guía; en su lugar, 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 resolver a 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`);
  return translations.default;
}
```

### 4. Actualiza el inicializador

Actualiza el inicializador para usar la nueva función cargador. Conserva la forma de bootstrap con await de nivel superior o función asíncrona que use la aplicación.

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