# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configuring a webpack SPA
URL: https://generaltranslation.com/en-US/docs/react/guides/spa/configuring-webpack-spa.mdx
---
title: Configuring a webpack SPA
description: How to configure gt-react in a webpack-powered single-page React application.
related:
  links:
    - /docs/react/guides/spa/internationalizing-react-spa
    - /docs/react/guides/developing-spa-translations
    - /docs/react/guides/storing-translations
    - /docs/react/guides/configuring
---

webpack can discover locale modules from a dynamic import context. Use a
dedicated bootstrap entry so initialization completes before React and any
module-level translations run.

Follow the [React SPA Quickstart](/docs/react/react-spa-quickstart) to install
`gt-react`, create `gt.config.json`, and configure `src/_gt/[locale].json` as
the translation output.

## Configure the application [#configure]

### Step 1: Add the translation loader

Keep the locale expression between a static directory and file extension so
webpack can create an import context:

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  try {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  } catch {
    return {};
  }
}
```

Create an empty JSON file for each target locale before the first build. Running
[`gt translate`](/docs/cli/reference/commands/translate) later replaces those
stubs with generated translations.

### Step 2: Create the bootstrap module

Assuming the existing React entry is `src/main.tsx`, create `src/index.ts` and
import the application only after
[`initializeGTSPA()`](/docs/react/reference/config#initialize-spa) resolves:

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

<Accordions>
  <Accordion title="What if the webpack target does not support top-level await?">

Keep the existing compilation target and use an async bootstrap function:

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

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

void bootstrap();
```

  </Accordion>
</Accordions>

### Step 3: Change the webpack entry

Point the existing entry at the bootstrap and preserve all other settings:

```js title="webpack.config.mjs"
export default {
  // Keep the project's existing options.
  entry: './src/index.ts',
};
```

When `HtmlWebpackPlugin` injects the built entry, leave the HTML unchanged. If
the HTML references the source entry directly, update that existing reference
instead of adding another script.

## Verify the setup [#verify]

Run the application's existing production build. The build should emit the
application entry and locale chunks from the webpack import context.

## Next steps

- [Internationalize the SPA](/docs/react/guides/spa/internationalizing-react-spa) - Mark JSX and strings for translation.
- [Develop with SPA translations](/docs/react/guides/developing-spa-translations) - Add compiler-powered development translations.
- [Store translations](/docs/react/guides/storing-translations) - Generate and manage local translation files.

## Next steps

- /docs/react/guides/spa/internationalizing-react-spa
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/storing-translations
- /docs/react/guides/configuring