Introduction

This is a simple i18next backend to be used in the browser. It will load resource in fluent format (.ftl) from a backend server using xhr.

Use it together with i18next-fluent, which formats the loaded messages. It is tested with i18next 26.

Getting started

Source can be loaded via npm or downloaded from this repo.

# npm package
$ npm install i18next-fluent-backend

Wiring up:

import i18next from "i18next";
import Fluent from "i18next-fluent";
import FluentBackend from "i18next-fluent-backend";

i18next.use(Fluent).use(FluentBackend).init(i18nextOptions);

• 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.i18nextFluentBackend

Backend Options

{
  // path where resources get loaded from, or a function
  // returning a path:
  // function(lngs, namespaces) { return customPath; }
  // the returned path will interpolate lng, ns if provided like giving a static path
  loadPath: '/locales/{{lng}}/{{ns}}.ftl',

  // path to post missing resources
  addPath: '/locales/add/{{lng}}/{{ns}}',

  // override fluent parser
  parse: function(data) { return data.replace(/a/g, ''); },

  // allow cross domain requests
  crossDomain: false,

  // allow credentials on cross domain requests
  withCredentials: false,

  // define a custom xhr function
  // can be used to support XDomainRequest in IE 8 and 9
  ajax: function (url, options, callback, data) {},

  // adds parameters to resource URL. 'example.com' -> 'example.com?v=1.3.5'
  queryStringParams: { v: '1.3.5' },

  // adds headers to every request
  customHeaders: { authorization: 'Bearer ...' }
}

Options can be passed in:

preferred - by setting options.backend in i18next.init:

import i18next from "i18next";
import FluentBackend from "i18next-fluent-backend";

i18next.use(FluentBackend).init({
  backend: options
});

on construction:

import FluentBackend from "i18next-fluent-backend";
const fltBackend = new FluentBackend(null, options);

via calling init:

import FluentBackend from "i18next-fluent-backend";
const fltBackend = new FluentBackend();
fltBackend.init(null, options);

---

Gold Sponsors