Connect your app to the CDN
Load published translations in your app at runtime, so a publish in transglot reaches users without a new build.
Your app fetches the published version of each language from the CDN when it needs it, instead of carrying translation files in its build. After that, publishing in transglot is enough to change what users see.
Before you start
You need a plan that includes runtime delivery (Starter and above), and an Owner or Admin to create the CDN key. Wiring up the app is a developer task.
Connect
Publish at least one language
The CDN only serves published versions. Publish a language from Releases first; see Publish a locale. Until then every request for it returns 404 not-published.
Create a CDN key
In the project's Settings → Developer → Runtime delivery (CDN), enter a Name under CDN keys and select New CDN key. Copy the key from Your new CDN key: it is shown once. See CDN keys.
Note the project id
The same card shows each language's Latest URL, for example https://api.transglot.ai/v1/cdn/42/de. The number after /cdn/ is the project id the SDKs ask for.
Install the runtime package
Use the package for your framework (see the runtime SDKs), or the framework-agnostic client:
npm install @transglot/runtimeConfigure it
Give the client the API address, the project id, the CDN key and the starting language:
import { createClient } from '@transglot/runtime';
export const i18n = createClient({
baseUrl: 'https://api.transglot.ai',
project: 42,
cdnKey: 'taicdn_...',
locale: 'de',
});
await i18n.loadLocale('de');
i18n.t('home.title');The client caches each language in memory and revalidates it with the ETag, so a repeat load that finds nothing new costs an empty 304. Full options are on the JavaScript SDK page.
Deploy your app
From now on, a publish in transglot reaches users without a rebuild.
Choose latest or a pinned version
By default the SDKs read the latest address, so each publish reaches users within about a minute (the latest address may be cached for up to 60 seconds). If you want a change to go live only when you ship, pin a version instead (the runtime client takes a version option). A pinned version never changes, so you move to a new one deliberately. See Latest and versioned addresses.
Things to know
- Use a JSON delivery format. The runtime SDKs read
json_flat,json_nested,laravel_jsonandflutter_arb. Set Delivery format in Settings → Developer if your project's default is something else. - Published versions are sparse. A key nobody has translated yet is not in the version. The runtime client returns the key itself for a missing string; to show your source text instead, load the source language underneath. The SDK pages show how for each framework.
- The CDN key is read-only. It can read what you already published and nothing else, so it can sit in client-side code. To keep it out of the browser altogether, fetch on your server.
- Do not use a deploy token here. Deploy tokens are secrets with write access. The CDN only accepts CDN keys.
If it doesn't work
| What you see | What to check |
|---|---|
404 not-published | The language has not been published yet, or you pinned a version older than the 20 kept. |
404 not-found | The project id in the address is not the key's project, or the language is not in the project. |
401 cdn-key-invalid | The key was deleted or mistyped. Create a new one. |
403 plan-feature-required | The account's plan no longer includes runtime delivery. |
| Old text after a publish | See Why are my translations not reaching my app? |