How to: Create a multi-lingual application with locale-prefixed URLs in Ember.js

In this tutorial I want to show how to create a multi-lingual application with URLs, containing locale (http://yourdomain.com/index.html#/locale/route-name), and with possibility to detect a locale from browser settings for index (http://yourdomain.com/index.html#/) route. We will use: ember, ember-cli and ember-i18n.

Part 1, installing and configuring ember-i18n

1. Install ember-i18n as described in documentation

2. Inject i18n service into your routes and controllers (documentation):

//../app/initializers/i18n.js

export default {
    name: 'i18n',
    after: 'ember-i18n',

    initialize: function (_, app)
    {
        app.inject('route', 'i18n', 'service:i18n');
        app.inject('controller', 'i18n', 'service:i18n');
    }
};

3. Define translations as described in ember-i18n documentation

4. Set a default locale (documentation) and allowed (supported) locales. In following example I set russian (ru) as default locale and russian and ukrainian (ru, uk) as allowed locales.

//../config/environment.js

/* jshint node: true */
module.exports = function (environment)
{
    var ENV = {

       // ...

        i18n: {
            defaultLocale: 'ru',
            allowedLocales: ['ru', 'uk']
        }
    };

    //...

    return ENV;
};

Part 2, defining a routes to prefix all URLs with locale

5. In your router.js define a lang route. All other routes should be nested. As result, your application’s URLs will look like http://yourdomain.com/index.html#/en/route-name, where en is a current locale.

//../app/router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend(
    {
        location: config.locationType
    }
);

Router.map(
    function ()
    {
        this.route(
            'lang', { path: '/:lang' }, function ()
            {
                this.route('index', { path: '/' });
                this.route('404', { path: '/*wildcard' });
                this.route('your-route-name');
            }
        );
    }
);

export default Router;

6. In lang route’s afterModel method set a locale to one from url or to default

//../app/routes/lang.js
import config from '../config/environment';

export default Ember.Route.extend(
    {
        afterModel: function (params)
        {
            var allowedLocales = config.i18n.allowedLocales;
            var defaultLocale = config.i18n.defaultLocale;
            this.set(
                'i18n.locale',
                params && params.lang && allowedLocales.indexOf(params.lang) > -1 ? params.lang : defaultLocale
            );
        }
    }
);

7. In index route’s beforeModel method let’s try to detect users locale from browser and redirect to lang route. Users will be redirected from http://yourdomain.com/index.html#/ to http://yordomain.com/index.html#/locale, where locale is a user’s preferred language or a default locale (‘ru’ in my case)

//../app/routes/index.js
import config from '../config/environment';

export default Ember.Route.extend(
    {
        beforeModel: function ()
        {
            var allowedLanguages = config.i18n.allowedLocales;
            var language = config.i18n.defaultLocale;
            if (navigator.languages) {
                for (let lang of navigator.languages) {
                    if (allowedLanguages.indexOf(lang) > -1) {
                        language = lang;
                        break;
                    }
                }
            } else {
                if (navigator.language) {
                    language = navigator.language;
                } else {
                    if (navigator.userLanguage) {
                        language = navigator.userLanguage;
                    }
                }
            }
            this.transitionTo('lang.index', { lang: language });
        }
    }
);

Gist: https://gist.github.com/GendelfLugansk/49be3c0c8ee91c2fb0b0

Ember-i18n documentation: https://github.com/jamesarosen/ember-i18n/wiki

Featured image source – pxhere.com