Version: 4.x.x

Preparing for production

In production environment, you should never leak your API key. In-context localization must be available only for your translators, developers or other staff but not for the outside world.

danger

Never leak your API key! We strongly recommend against adding API key into git repository.

To prepare your application for production you will need to let Tolgee use exported .json files. You can get these files by exporting your translations from web application. See exporting translations.

To make Tolgee look for json files just remove apiKey property from configuration object. If we continue with our hello world example, production configuration object will look like this:

{
    inputPrefix: "{{",
    inputSuffix: "}}",
    watch: true
}

In production mode, apiUrl and ui properties are useless as we don't allow anybody to change our translations in the app accessible from the outside world. We can also remove the script tag importing tolgee UI.

Next, we should add exported translations into some public path so Tolgee can reach them. By default, Tolgee looks for the translation files in /i18n/[lang].json. To change this, you may provide filesUrlPrefix property to configuration object but for out example we can stick with default.

Let's take the exported json files and put them into the i18n directory placed as a sibling of our html file:

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

That's it! Our app is ready for production. Here is the final HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello world</title>
  </head>
  <body>
    <h1>{{hello_world}}</h1>
  </body>
  <script src="https://unpkg.com/@tolgee/core/dist/tolgee.umd.min.js"></script>
  <script>
    const { Tolgee, IcuFormatter } = window['@tolgee/core'];
    const tg = Tolgee.use(IcuFormatter).init({
      inputPrefix: '{{',
      inputSuffix: '}}',
      watch: true,
    });
    tg.run();
  </script>
</html>

Now you maybe wish to add loading overlay to make untranslated texts invisible.