Jan Hesters

Localization with AWS Amplify

Translate your application dynamically in multiple languages with AWS Amplify's I18n module. This tutorial will teach you how to use Amplify's internationalization.

Note: This post is a tutorial for intermediates. Do you want to learn how to accelerate the creation of your projects using Amplify 🚀? For beginners, I recommend checking out Nader Dabit's free course on egghead, or Amplify's 'Getting Started' to learn the basics.

If you build an application for an international user base, it is probably a good idea to translate your app in the respective countries language. Localization enables your software to reach more users 🌎.

Translating your app with AWS Amplify is very straightforward. We'll go through it step by step in React, but the steps are the same for other frameworks.

Start by creating a new React app.

npx create-react-app amplify-localization && cd amplify-localization

You don't need to run amplify init to use the I18n module because it's independent of the could services. Run yarn start or npm start to view your application. No matter where you are from, it should now say "Edit src/App.js and save to reload."

Let's change that using Amplify's I18n. Add Amplify to your project.

yarn add aws-amplify

Create a new file src/strings.js.

export const strings = {
  en: {
    appTitle1: 'Edit',
    appTitle2: 'and save to reload',
  },
  de: {
    appTitle1: 'Editiere',
    appTitle2: 'und speichere ab um neu zu laden',
  },
};

Feel free to add your native language. Next, we need to use the I18n module in src/App.js.

import { I18n } from '@aws-amplify/core';
import { strings } from './strings';
I18n.putVocabularies(strings);

Replace your <p /> tag in App.js with the following.

<p>
  {I18n.get('appTitle1')} <code>src/App.js</code> {I18n.get('appTitle2')}
</p>

If your browser is set to German, or if you added your native language and your browser is set to that, you should already see the translated appTitle. If not, you can set it yourself by using I18n.setLanguage('de'). If you are using AWS Amplify on mobile, it cannot automatically detect your language. You will have to use another library to recognize it and then set it manually.

Let's take it a step further 👏🏻. What if you want to keep your strings where you use them? For example, I like to structure my projects by feature.

├──todos
│  ├── component
│  ├── reducer
│  ├── strings
│  └── test
└──user
   ├── component
   ├── reducer
   ├── strings
   └── test

You could either use a function from a well-tested library like mergeDeepRight from Ramda, or you write a function that merges one layer deep yourself. I recommend using a function from a library because it likely works better than anything you come up with yourself. Keep in mind that the keys for each language have to be unique. Otherwise, they will get overwritten by the latest key.

// src/App.js
import { mergeDeepRight } from 'ramda';
import { strings as todosStrings } from './todos/strings';
import { strings as userStrings } from './user/strings';
I18n.putVocabularies(mergeDeepRight(todosStrings, userStrings));

That's it 👍🏻. Your app now correctly displays in multiple languages.

Note: You can clean up everything by running amplify delete.