# 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](https://en.wikipedia.org/wiki/Internationalization_and_localization) 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:

   ```
   $ yarn add file:../../packages-caplin/br
   ```

**📌 NOTE**\
Some dependencies of the `br` package include Caplin alias definitions. If Webpack throws an alias resolution error during build, see [Troubleshooting build issues](building-an-application.md#troubleshooting).

## 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:

```
<token>=<localised_text>
```

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

* file `_resources/en.properties`:

  ```
  greeting.morning=Good Morning
  greeting.evening=Good Evening
  ```
* file `_resources/de.properties`:

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

## Replace strings in your application with i18n tokens

Caplin’s [/br/I18n/i18n](https://docs.caplin.com/developer/api/caplin_trader/latest/module-br-i18n_I18N.html) 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:

   ```js
   import "./_resources/en.properties";
   import "./_resources/de.properties";
   ```
2. Import the /br/I18n/i18n class:

   ```js
   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:

   ```js
   var greeting = i18n('greeting.morning');
   ```

   **📌 NOTE**\
   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:

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

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