Add i18n to your application

In this blog post we want to talk about internationalization.

Internationalization (i18n) is a very important step to open up your application to a broader audience.
I always start a Meteor application with support for other languages right away because it’s “nearly no extra effort” and makes it easier to support other languages (I always start with German and English) later on.

There are different strategies how you can handle internationalization with Meteor. In this post we’ll focus on an easy implementation which checks the users browser-Locale to determine in which language your application should be delivered.

Let’s start!

1. Add the i18n-Package

Let’s start by adding the i18n-Package to your Meteor project. There are different i18n-Packages available on Atmosphere. I’ll use the anti:i18n-Package. A more popular one is tap:i18n which you could use as well (I had loading lags (e.g. the English language was always served at first and then visibly replaced with the German) when using the package but you should definitely check it out).
The idea is always the same. There are translation-Helpers you can use and you need to add a language-File with the key-Value pairs for your language.

Run

meteor add anti:i18n<br />

to add the anti:i18n-Package to your Meteor-Project.

2. Set the default language

Next up we want to tell our application which language is our default language (this is the language the package will always fall back to when no other language is available).

// lib/startup.js<br />
Meteor.startup(function() {<br />
  return i18n.setDefaultLanguage('de');<br />
});<br />

We do this on both the server and the client so that both environments have the same default language-Setting.

3. Adding translations

Let’s start the translation-Process. The first thing we need to do is to add two files (of course you can add as many as you want) which will store the keys and values for the translations (in our case we’ll translate our project into English and German).

// lib/i18n/de.js<br />
i18n.map('de', {<br />
  helloWorld: 'Hallo Welt'<br />
});<br />
// lib/i18n/en.js<br />
i18n.map('en', {<br />
  helloWorld: 'Hello world'<br />
});<br />

We’ve defined these translations in the lib-Folder so that they are both loaded at first and are available to the server and the client.

4. Add translations to your templates

The anti:i18n-Package has a handy helper available you can use in your templates:

<template name="testTemplate"><br />
  <h1>{{i18n 'helloWorld'}}</h1><br />
</template><br />

Furthermore you can use the same helper to use translated values in your JavaScript-Files:

Template.testTemplate.onRendered(function() {<br />
  console.log(i18n('helloWorld'));<br />
});<br />

5. Set the language (with the console)

Let’s see if it works! Open up a browser-Console and type in:

i18n.setLanguage('de');<br />

You should now see the German translation for your template.

Run:

i18n.setLanguage('en');<br />

to switch the language back to English.

Awesome! Your application is now translated and accessible in different languages.
But changing the locale in the browser console is not a good user experience and a little bit cumbersome…

5. Set the language based on the browsers settings

It would be way cooler if we could display the translated version of our application based on the language the users browser uses.
Let’s create a simple functionality which will fetch the language from the users browser and set the language accordingly:

// client/lib/startup.js<br />
Meteor.startup(function() {<br />
  var localeFromBrowser = window.navigator.userLanguage || window.navigator.language;<br />
  var locale = 'en';<br />
  if (localeFromBrowser.match(/de/)) {<br />
    locale = 'de';<br />
  }<br />
  i18n.setLanguage(locale);<br />
});<br />

This way we’ll see the German translations if the users browser is set to German. Otherwise we’ll always see the English translations (as a fallback). You can extend this function easily if you want to support other languages as well.

6. What’s next

This is just a rough starting point.
Next up you could e.g. store the locale in the database and fetch it each time the user signs in. This way the user will always see the same translation when using your application with his account regardless of the device he uses.
Additionally you should also check out other translation libraries to see which one fits your needs!