Skip to main content
Version: 4.x.x

Preparing for production (React)

In production mode you should never use localization data from Tolgee REST API and you should never leak your API key. You should use data exported from Tolgee platform. To get exported localization files, see exporting translations.

There are multiple options to provide static localization data for production builds. Providing a URL prefix where Tolgee can fetch the data from or providing imported data as reference or provider in TolgeeProvider config prop.

To provide your localization data using dynamic import you will need to add providers for every supported language to TolgeeProvider's configuration property.

<TolgeeProvider
  staticData={{
    en: () => import('./i18n/en.json'),
    de: () => import('./i18n/de.json'),
  }}
  ...
>
  ...
</TolgeePrivider>

Using this approach data will be fetched just when it's needed, so you will save some network traffic.

Using imported object​

import * as localeEn from 'i18n/en.json';
import * as localeDe from 'i18n/de.json';

...

<TolgeeProvider
  staticData={{
    en: localeEn,
    de: localeDe,
  }}
  ...
>
  ...
</TolgeePrivider>

Using this approach, all localization data are bundled with your application, so it will be downloaded with your application code. This approach could be very useful for SSR, when you need your localization data imported to be rendered by your SSR engine.

Providing data using filesUrlPrefix option​

<TolgeeProvider
  filesUrlPrefix="i18n/"
  ...
>
  ...
</TolgeePrivider>

This option tells Tolgee, that localization data (en.json, de.json) can be found on https://<your url>/i18n, so it will be fetched with every page load.