Configuring and defining our first translation files

Our application is ready to start using the i18n framework. There are some steps to get ready with the plugin, so let's explore them.

The first thing we need is to locate our index.html file. This should be located in our main root application folder. Ensure that your <body> section is the same as the following:

 <body aurelia-app="main">
      /* Some content */
 </body>

If you are a Webpack user, locate the index.js file instead of index.html.

Then, in your root app location, create a folder called locales. It will be used to store all your location files. Create one folder per language you want to support. Then, inside each folder, create a file called translation.json. This file will contain all your text translation structures, depending on your application.

Your application folder structure must look like this:

i18next works based on a predefined transaction-file schema. Look at the following example of our en-EN transaction file:

 {
    "welcome": "Welcome to FIFA WC 18!",
    "user_male": "Mr.",
    "user_female": "Mss.",
    "time_remaining": "Time Remaining : {{time}}"
  }

Now, one for es-ES language support:

 {
    "welcome": "Bienvenido a FIFA WC 18!",
    "user_male": "Sr.",
    "user_female": "Sra.",
    "time_remaining": "Tiempo pendiente : {{time}}"
  }

So these are simply for example purposes and very useful to understand how this plugin works. Now, it's time to configure the plugin backend. Do you remember that we created the src/main.js file to define our configuration function? Well, it's time to open this file and add some new configuration. If you haven't created this file yet, this is a good time to do that.

For those who have chosen the i18next-xhr-backend support, first of all, open the main.js file and find the Aurelia's configuration section. In the first lines of the file, you must import the following files:

import {I18N, TCustomAttribute} from 'aurelia-i18n';
import Backend from 'i18next-xhr-backend';

Then, create a new plugin pipe:

aurelia.use
  .standardConfiguration()
  .plugin('aurelia-materialize-bridge', b => b.useAll())
  .plugin()/* <<<<  You must create a new plugin pipe*/
  .feature('resources');

Now, inside the new plugin pipe, add the following configuration:

.plugin('aurelia-i18n', (instance) => {
            let aliases = ['t', 'i18n'];
            TCustomAttribute.configureAliases(aliases);
            instance.i18next.use(Backend);

            return instance.setup({
              backend: {                                  
                loadPath: './locales/{{lng}}/{{ns}}.json',
              },
              attributes: aliases,
              lng : 'es',
              fallbackLng : 'en',
              debug : false
            });
});

Let's explain a little of what are we doing in this file.

First, we need to configure our i18n aliases, so just declare them on a simple string array and pass it as a parameter to the static configureAliases() method. This will map the defined values in our <html> tags to call the correct values. It may sound a little confusing at this time, but don't worry, you are very near to seeing the whole picture:

let aliases = ['t', 'i18n'];
TCustomAttribute.configureAliases(aliases);

Next, we register the imported backend plugin (i18next-xhr-backend) into our aurelia-i18n instance:

instance.i18next.use(Backend);

Finally, we need to add some configuration. This is completely based on the i18n configuration documents, so you can find more information about this at http://i18next.com/docs/options. That promise configuration must be returned; because of that, we are adding the return statement before the instance.setup() declaration:

backend: {  // <-- configure backend
   loadPath: './locales/{{lng}}/{{ns}}.json', // <-- Our location files path
},

The last options are used to map fallback language, default language and so on:

attributes: aliases, <<-- Predefined aliases
lng : 'es', // <<-- Default language to use (overrides language detection).
fallbackLng : 'en',// <<-- Language to use is current location language is not available
debug : false // <<-- Log info level in console output

We are ready to start using the plugin. Good job!

If your are a Webpack user, don't forget to put the PLATFORM prefix before the plugin name. Example: .plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {......});

Table of Contents for Configuring and defining our first translation files

Create new playlist

Sign In

Sign Up

Table of Contents for
Configuring and defining our first translation files