# Internationalising an application

## 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`
 Some dependencies of the `br` package include Caplin alias definitions. If Webpack throws an alias resolution error during build, see Troubleshooting build issues.

## 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 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/en.properties";
import "./_resources/de.properties";``````
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:

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

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