Skip to main content
Version: 5.x.x

Providing static data

Provide static localization data in production mode or if you want to use it without Tolgee platform.

Load translations directly from Tolgee​

The easiest way to get to your localization files on production is to set up Tolgee Content Delivery and fetch the translations directly from there.

import { BackendFetch } from '@tolgee/react';

const tolgee = Tolgee()
  ...
  .use(BackendFetch({ prefix: '<your content storage link>'}))
  ...

Use localization files directly​

Other option is to export localization files Tolgee platform manually and bundle them directly with your application.

Export with CLI​

Install @tolgee/cli package:

# install Tolgee cli
npm i -g @tolgee/cli

# login to tolgee platform
tolgee login <Your-Personal-Access-Token>

# pull translation files to ./i18n folder
tolgee pull ./i18n

Providing data using dynamic import​

To provide your localization data using dynamic import you will need to add providers for every supported language to staticData.

const tolgee = Tolgee().init({
  ...
  staticData: {
    en: () => import('./i18n/en.json'),
    de: () => import('./i18n/de.json'),

    // or for namespaces
    'de:common': () => import('./i18n/common/de.json'),
  }
})
info

For some build systems you'll need to use
en: () => import('./i18n/en.json').then(m => m.default)

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

import * as commonDe from 'i18n/common/de.json'

...

const tolgee = Tolgee().init({
  ...
  staticData: {
    en: localeEn,
    de: localeDe,

    // or for namespaces
    'de:common': commonDe,
  }
})

Using this approach, all localization data are bundled with your application. Don't use it, if our translations files are large. This approach is useful on SSR, when you need the translations to be available for initial render.

Providing data using backend plugin​

import { BackendFetch } from '@tolgee/react';

tolgee.use(BackendFetch());

BackendFetch will fetch translation files (en.json, de.json) from https://<your url>/i18n, so you don't have to list all the files explicitly.

If you don't use namespaces place your translation into /i18n folder:

├── i18n
│   ├── cs.json
│   └── en.json
├── index.html

If you use namespaces, it should look like this:

├── i18n
│   └── common
│       ├── en.json
│       └── de.json
├── index.html

This is default behavior, it's possible to customize in BackendFetch plugin.