# General Translation React SDKs (gt-react, gt-next): Developing with SPA translations
URL: https://generaltranslation.com/en-US/docs/react/guides/developing-spa-translations.mdx
---

title: Developing with SPA translations
description: How to preview General Translation translations while developing a single-page React app.
related:
  links:
    - /docs/react/guides/storing-translations
    - /docs/react/guides/configuring
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/managing-locales

---

# Developing with SPA translations

Development translations let you preview translated content as you edit your SPA. They require the GT compiler and a development API key.

**Prerequisites:**

- A single-page React app configured with the [SPA Quickstart](/docs/react/react-spa-quickstart)
- A development API key that starts with `gtx-dev-`

## Setup [#setup]

### 1. Install the compiler

Install `@generaltranslation/compiler` as a development dependency:

<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. Add the compiler plugin

Add the plugin for your bundler. For 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: [gtCompiler({ ...gtConfig }), react()], // [!code highlight]
});
```

<Accordions>
  <Accordion title="Not using Vite?">

  `@generaltranslation/compiler` also exports `webpack`, `rollup`, and `esbuild` plugins. Import the plugin that matches your bundler.

  ```ts
  import { webpack as gtCompiler } from '@generaltranslation/compiler';
  ```

  </Accordion>
</Accordions>

### 3. Add development credentials

Get a development API key at [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) or by running:

```bash
npx gt auth
```

Then add your project ID and development API key to `.env.local`:

```bash title=".env.local"
VITE_GT_PROJECT_ID="your-project-id"
VITE_GT_DEV_API_KEY="your-dev-api-key"
```

And, pass these to your initialization function:

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

<Callout type="warn">

**Development only:** Use a key starting with `gtx-dev-`. Never expose a production key that starts with `gtx-api-` in browser code.

</Callout>

### 4. Start developing

Start your development server and switch to a non-default locale. When you edit translatable content, the compiler registers the change and `gt-react` requests an updated development translation.

## Next steps

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