Skip to main content
Version: 4.x.x

Preparing for production

danger

In production mode you should never use localization data from Tolgee REST API and you should never leak your API key.

info

You should use data exported from Tolgee platform. To get exported localization files, see Exporting translations doc page.

In production, you should set the API key to undefined and provide exported translations. You have multiple options how to provide static i18n data to TolgeeProvider component.

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

<script lang="ts">
  import { TolgeeProvider } from "@tolgee/svelte";
  import type { TolgeeConfig } from "@tolgee/core";

  const tolgeeConfig = {
    preloadFallback: true,
    staticData: {
      en: () => import("../i18n/en.json"),
      cs: () => import("../i18n/cs.json"),
      de: () => import("../i18n/de.json"),
      fr: () => import("../i18n/fr.json")
    },
    availableLanguages: ["en", "de", "cs", "fr"]
  } as TolgeeConfig;
</script>

<TolgeeProvider config={tolgeeConfig}>
  <div slot="loading-fallback">Loading...</div>
  <slot />
</TolgeeProvider>

To provide your localization data using dynamic import, you will need to provide an object of translations for every supported language to TolgeeProvider's config prop.

<script lang="ts">
  import { TolgeeProvider } from "@tolgee/svelte";
  import type { TolgeeConfig } from "@tolgee/core";
  import enLang from "../i18n/en.json"
  import deLang from "../i18n/de.json"
  import csLang from "../i18n/cs.json"
  import frLang from "../i18n/fr.json"

  const tolgeeConfig = {
    preloadFallback: true,
    staticData: {
      en: enLang,
      cs: csLang,
      de: deLang,
      fr: frLang
    },
    availableLanguages: ['en', 'de', 'cs', 'fr']
  } as TolgeeConfig;
</script>

<TolgeeProvider config={tolgeeConfig}>
  <div slot="loading-fallback">Loading...</div>
  <slot />
</TolgeeProvider>
info

To get full image of working Svelte integration, check our Svelte Example Application.