How To Translate EmberJS Apps

Building multilingual EmberJS web apps is super easy. We show you how to do it in this guide. Get started with EmberJS app localization today.

This step-by-step guide will show you how to localize EmberJS apps.

Prerequisites

Create a new, blank EmberJS application:

Switch to the newly created demoapp directory and install the i18n add-on:

Next, create two language files, Englisch (en) and German (de):

Language Files

Language files (locales) hold all translatable strings that are used in your application code and templates. The format is simple:

Strings can also be grouped:

You can use Placeholders…

… and Pluralization (CLDR pluraization format):

Using Language Files

Set a default langauge that is used as a fallback in config/enviroment.js:

And in your main app/app.js, set the current locale to be used:

In your templates and app code you can use the ‘t’ helper function (‘t’ for translate) for loading strings from the current locale. The t function is available in all templates, controllers, components, routes, and models.

You can load translated strings into you templates:

Or in your code:

Managing Translations

Working with the .js language files can be tricky and translating strings in a text editor also isn’t a very convenient workflow.

PhraseApp is a translation management tool that addresses some of these issues. It features a powerful In-Context-Editor (Demo), making the process of translating web apps more convenient. Integrating the PhraseApp In-Context-Editor in your EmberJS apps is easy.

Install the PhraseApp add-on:

Add some PhraseApp configuration to your app/app.js:

Then include the JavaScript snippet into your templates:

You can find your Project-ID in the PhraseApp Translation Center.

ember-cli-phraseapp acts as a replacement for ember-cli-i18n. When phraseEnabled is set to true, string keys are exposed to the to the In-Context-Editor.

Further Reading

Be sure to subscribe and receive all updates from the PhraseApp blog straight to your inbox. You’ll receive localization best practices, about cultural aspects of breaking into new markets, guides and tutorials for optimizing software translation and other industry insights and information. Don’t miss out!

Comments