Internationalising an application

This page provides instructions on internationalising and localising a Caplin Trader 5 application.

For more information on the terms used in this page, see Internationalisation and localisation on Wikipedia.

Install required Caplin packages

To install the packages that provide Caplin’s internationalisation functionality, follow the steps below:

  1. Run the command below from the root directory of your Caplin Trader 5 application to install the br package and its dependencies:

    npm install --save ../../packages-caplin/br
  2. Edit your application’s package.json file. If any semver strings for local packages are absolute file URLs, convert them to relative URLs. For example, in the packages.json file below, the URL to the br package has been changed to a relative URL:

      "dependencies": {
        "@caplin/build-tasks": "^5.0.0",
        "@caplin/express-dev-server": "^4.0.0",
        "@caplin/versioning": "^2.0.0",
        "@caplin/webpack-config-app": "^6.0.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.2.2",
        "babel-preset-react": "^6.23.0",
        "br": "file:../../packages-caplin/br"

    For more information on local paths in the package.json file, see package.json: Local paths in the npm documentation.

  3. The br-services package, installed as a dependency of the br package, includes alias definitions. To ensure that Webpack detects the aliases, import the aliasProviders module of the br-services package into your application’s src/config/aliases.js module and merge it with the array that src/config/aliases.js exports.

    const brServicesAliasProviders = require('br-services/aliasProviders');
    module.exports = Object.assign({}, brServicesAliasProviders);
    To get a definitive list of all packages in your application that include alias definitions, search for files named aliasProviders.js under your application’s npm_modules directory. For example, on Linux and macOS, run this command in your application’s npm_modules directory: find . -name 'aliasProviders.js'

Create localisation resource files

Create a resource file in your application for each language your app will be localised to. Name the file _resources/<lang_code>.properties, where <lang_code> is the international two-letter code for the language. At the very least, create a resource file for the main language of your application; new resource files can be added later.

In each file, specify a list of tokens and values in the format below:


For example, files for English and German might contain the following content:

  • file _resources/

    greeting.morning=Good Morning
    greeting.evening=Good Evening
  • file _resources/

    greeting.morning=Guten Morgan
    greeting.evening=Guten Abend

Replace strings in your application with i18n tokens

Caplin’s /br/I18n/i18n class handles internationalisation in Caplin Trader. Replace all text strings in your application’s user interface with calls to i18n(token).

Edit each module that requires internationalisation, and make the following changes:

  1. Import the localisation resource files. For example, to import the English and German resources files created above, use the import statements below:

    import "./_resources/";
    import "./_resources/";
  2. Import the /br/I18n/i18n class:

    import i18n from "br/I18n";
  3. Replace all user-facing text strings with calls to i18n(token). For example, to localise a morning greeting, you might use the code below:

    var greeting = i18n('greeting.morning');
    The locale used to resolve the token passed to i18n is set in your application’s index page (see next section).

Include i18n resources in your application’s index page

Edit your application’s index page and make the following changes:

  1. Insert the following JavaScript above where the bundle-dev.js file is included:

      window.$_brjsI18nProperties = {};
      window.$_brjsI18nUseLocale = navigator.language === "en"
        || navigator.language === "de" ? navigator.language : "en";
  2. Include the i18n-dev.js bundle above where the bundle-dev.js file is included:

    <script src="static/i18n-dev.js"></script>