Introduction
This is a simple i18next backend to be used in Node.js, in the browser and for Deno. It will load resources from a backend server using the XMLHttpRequest or the fetch API.
Get a first idea on how it is used in this i18next crash course video.
It's based on the deprecated i18next-xhr-backend and can mostly be used as a drop-in replacement.
Why i18next-xhr-backend was deprecated?
Advice:
If you don't like to manage your translation files manually or are simply looking for a better management solution, take a look at i18next-locize-backend. The i18next backed plugin for 🌐 locize ☁️.
To see i18next-locize-backend in a working app example, check out:
Troubleshooting
Make sure you set the debug
option of i18next to true
. This will maybe log more information in the developer console.
Seeing failed http requests, like 404?
Are you using a language detector plugin that detects region specific languages you are not providing? i.e. you provide 'en'
translations but you see a 'en-US'
request first?
This is because of the default load
option set to 'all'
.
Try to set the load
option to 'languageOnly'
i18next.init({
load: 'languageOnly',
})
Getting started
Source can be loaded via npm or downloaded from this repo.
There's also the possibility to directly import it via a CDN like jsdelivr or unpkg or similar.
$ npm install i18next-http-backend
Wiring up:
import i18next from 'i18next';
import HttpApi from 'i18next-http-backend';
i18next.use(HttpApi).init(i18nextOptions);
for Deno:
import i18next from 'https://deno.land/x/i18next/index.js'
import Backend from 'https://deno.land/x/i18next_http_backend/index.js'
i18next.use(Backend).init(i18nextOptions);
for plain browser:
<script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.1/i18nextHttpBackend.min.js"></script>
- As with all modules you can either pass the constructor function (class) to the i18next.use or a concrete instance.
- If you don't use a module loader it will be added to
window.i18nextHttpBackend
Backend Options
{
loadPath: '/locales/{{lng}}/{{ns}}.json',
addPath: '/locales/add/{{lng}}/{{ns}}',
parse: function(data) { return data.replace(/a/g, ''); },
parsePayload: function(namespace, key, fallbackValue) { return { key: fallbackValue || "" } },
parseLoadPayload: function(languages, namespaces) { return undefined },
crossDomain: false,
withCredentials: false,
overrideMimeType: false,
customHeaders: {
authorization: 'foo',
},
customHeaders: () => ({
authorization: 'foo',
}),
requestOptions: {
mode: 'cors',
credentials: 'same-origin',
cache: 'default'
}
request: function (options, url, payload, callback) {},
queryStringParams: { v: '1.3.5' },
reloadInterval: false
}
Options can be passed in:
preferred - by setting options.backend in i18next.init:
import i18next from 'i18next';
import HttpApi from 'i18next-http-backend';
i18next.use(HttpApi).init({
backend: options,
});
on construction:
import HttpApi from 'i18next-http-backend';
const HttpApi = new HttpApi(null, options);
via calling init:
import HttpApi from 'i18next-http-backend';
const HttpApi = new HttpApi();
HttpApi.init(null, options);
TypeScript
To properly type the backend options, you can import the HttpBackendOptions
interface and use it as a generic type parameter to the i18next's init
method, e.g.:
import i18n from 'i18next'
import HttpBackend, { HttpBackendOptions } from 'i18next-http-backend'
i18n
.use(HttpBackend)
.init<HttpBackendOptions>({
backend: {
},
})
From the creators of i18next: localization as a service - locize.com
A translation management system built around the i18next ecosystem - locize.com.
With using locize you directly support the future of i18next.