How to localize node.js app using i18n-abide

So, last week I have finally localized two of our projects. One is the login.webmaker.org account page, and the other one is the webmaker.org (not 100% completed).

The method that I use to localize these two node.js app was to use the i18n-abide module which is also created by a Mozillian people.

To guide you through on how I did it first you need the following:

  1. Node.js installed on your machine
  2. You need to be patient here! <<< This is a must.

Recommend to use nunjucks as your templating system only because EJS is not fully compatible with some of the feature of the i18n-abide (yet).

Oh! Let's make sure you also have decided which file format for your translation file you would use.
In our case we've decided to use .plist file, but you have other option which is : .po   but I'm not going to go in details on how to do it using .po because it is not in our interest to do it in that file format simply because it is way too much work on it.

So, if you decided to use .plist which is really easy to be used.

var i18n = require( "i18n-abide" );  
// Setup locales with i18n
app.use( i18n.abide({  
  supported_languages: [
    'ach', 'ady', 'af', 'am', 'an', 'ar', 'as', 'ast', 'az', 'be', 'be_BY', 'bg', 'bn', 'bo',
    'br', 'bs', 'ca', 'cs', 'cv', 'cy', 'da', 'da_DK', 'db_LB', 'de', 'el', 'en_US', 'eo', 'es',
    'et', 'eu', 'fa', 'fi', 'fil', 'fr', 'ga', 'gd', 'he', 'hi', 'hr', 'ht', 'hu', 'hy', 'ia', 
    'id', 'is', 'it', 'ja', 'ja_JP', 'jv', 'ka', 'kk', 'km', 'kn', 'ko', 'ku', 'la', 'lb', 'lt', 
    'lv', 'mi', 'mk', 'ml', 'mn', 'mr', 'ms', 'mt', 'my', 'ne', 'nl', 'no', 'nr', 'or', 'os', 
    'pa', 'pl', 'pt', 'ro', 'ru', 'rw', 'sc', 'si', 'sk', 'sl', 'sm', 'sn', 'so', 'sq', 'sq_AL',
    'sr', 'sv', 'sw', 'ta', 'te', 'th_TH', 'ti', 'tl', 'tn', 'to', 'tr', 'tt', 'uk', 'ur', 'uz',
    'vec', 'vi', 'wa', 'wo', 'xh', 'yi', 'yo', 'zh', 'zu'
  ],
  default_lang: "en_US",
  translation_type: "plist",
  translation_directory: "locale",
  locale_on_url: true
}));

So now, the i18n-abide eh.! head down to their github page here, but let me tell you one thing first. If you decided to use .plist file for your translation. You can't do it until the Pull request from David Humphrey landed first (Hopefully this coming week).

Now what you need in order to set up:

  1. You need the i18n-abide in your package.json

https://npmjs.org/package/i18n-abide (Hopefully the newer version would come soon)

  1. Setup the i18n-abide in your application.

First you need to require it.

var i18n = require( "i18n-abide" );  
// Setup locales with i18n
app.use( i18n.abide({  
  supported_languages: [
    'ach', 'ady', 'af', 'am', 'an', 'ar', 'as', 'ast', 'az', 'be', 'be_BY', 'bg', 'bn', 'bo',
    'br', 'bs', 'ca', 'cs', 'cv', 'cy', 'da', 'da_DK', 'db_LB', 'de', 'el', 'en_US', 'eo', 'es',
    'et', 'eu', 'fa', 'fi', 'fil', 'fr', 'ga', 'gd', 'he', 'hi', 'hr', 'ht', 'hu', 'hy', 'ia', 
    'id', 'is', 'it', 'ja', 'ja_JP', 'jv', 'ka', 'kk', 'km', 'kn', 'ko', 'ku', 'la', 'lb', 'lt', 
    'lv', 'mi', 'mk', 'ml', 'mn', 'mr', 'ms', 'mt', 'my', 'ne', 'nl', 'no', 'nr', 'or', 'os', 
    'pa', 'pl', 'pt', 'ro', 'ru', 'rw', 'sc', 'si', 'sk', 'sl', 'sm', 'sn', 'so', 'sq', 'sq_AL',
    'sr', 'sv', 'sw', 'ta', 'te', 'th_TH', 'ti', 'tl', 'tn', 'to', 'tr', 'tt', 'uk', 'ur', 'uz',
    'vec', 'vi', 'wa', 'wo', 'xh', 'yi', 'yo', 'zh', 'zu'
  ],
  default_lang: "en_US",
  translation_type: "plist",
  translation_directory: "locale",
  locale_on_url: true
}));

These you gotta make sure you have it declare before any of your static routes because it will break any of your route to your static files.

There are quite a number of options to configure here.

  supported_languages: [
    'ach', 'ady', 'af', 'am', 'an', 'ar', 'as', 'ast', 'az', 'be', 'be_BY', 'bg', 'bn', 'bo',
    'br', 'bs', 'ca', 'cs', 'cv', 'cy', 'da', 'da_DK', 'db_LB', 'de', 'el', 'en_US', 'eo', 'es',
    'et', 'eu', 'fa', 'fi', 'fil', 'fr', 'ga', 'gd', 'he', 'hi', 'hr', 'ht', 'hu', 'hy', 'ia', 
    'id', 'is', 'it', 'ja', 'ja_JP', 'jv', 'ka', 'kk', 'km', 'kn', 'ko', 'ku', 'la', 'lb', 'lt', 
    'lv', 'mi', 'mk', 'ml', 'mn', 'mr', 'ms', 'mt', 'my', 'ne', 'nl', 'no', 'nr', 'or', 'os', 
    'pa', 'pl', 'pt', 'ro', 'ru', 'rw', 'sc', 'si', 'sk', 'sl', 'sm', 'sn', 'so', 'sq', 'sq_AL',
    'sr', 'sv', 'sw', 'ta', 'te', 'th_TH', 'ti', 'tl', 'tn', 'to', 'tr', 'tt', 'uk', 'ur', 'uz',
    'vec', 'vi', 'wa', 'wo', 'xh', 'yi', 'yo', 'zh', 'zu'
  ],

The above is the list of what language you support, and if you don't include some it will give you the English version instead. (Default)

default_lang: "en_US",

This one is obvious and below is what file format you want to use

  translation_type: "plist",

Here you say where is your translation files located

    translation_directory: "locale",

Here if you want to use URL to override the request of the language (Accepted language) that is set from the browser.

 locale_on_url: true

So for example if the person came from Thailand: the lang="th-TH" but that person might want English version, and not Thai. He can simply request it by doing :

http://url.com/en-US

That will overrides the request and gives him English version instead.

So... after you've setup all that, and now let see what we can do with it.

First, you will right away have two global variables and one global function.

lang and lang_dir

<html lang="{{ lang }}" dir="{{ lang_dir }}">
So that goes there or anywhere you want. And the other one would be the global function :
{{ gettext('string name goes here') }}
That gettext would go in to the `locale` direction of the requested language and will go and look for the key that you asked for, and it will put it in that place where ever you place that function. ----- You can see our live version of "I love you - Localized app" http://iloveyou-localized.herokuapp.com This one Humphrey, igor and I did it a month ago.