AWS Amplify Localization Tutorial

In this blog post, I will show you how to add localization to your Amplify app. The Amplify documentation gives a basic explanation of how to do it, I will try to add more complexity such as adding Routing and a Select Language button.

Photo by Sigmund on Unsplash

Note: the tutorial is based on ReactJS.

Let’s start by creating an Amplify app:

npx create-react-app react-localized-app cd react-localized-app

Run yarn start or npm start to run your application. You should see a page that says "Edit src/App.js and save to reload."

The next step is to add Amplify, npm install aws-amplify . The i18n is a module inside aws-module , you can find the documentation on the following link: https://docs.amplify.aws/lib/utilities/i18n/q/platform/js/

To implement localization, we need a file where we map the languages’ translations. Add a languages.js file to your project (feel free to add your own language):

const dictionary = {   
  en: {     
   'mainTitle': 'This is an english main title',
   'secondaryTitle': "I am a secondary title"   },   
  it: {
   'mainTitle': 'Questo è un titolo in italiano',
   'secondaryTitle': 'Sono un titolo secondario'   }
};

Now we can go to our App.js file and import the languages file to use it:

import "./App.css";
import languages from "./languages";
import { I18n } from "aws-amplify";
I18n.putVocabularies(languages);
I18n.setLanguage("en");
function App() {
return (
<div className="App">  
  <p>{I18n.get("mainTitle")}</p>
  <p>{I18n.get("secondaryTitle")}</p>
</div>);
}
export default App;

If you run npm start, you will see the translated text in the language you have set on the setLanguage method.

Alright, we have demonstrated that the i18n module is working. In real-world scenarios, things get more complicated. We usually have React App with Routes and we should add a switch language button to let our users choose the language.

We will focus on two main issues that can raise:

• the translations are not getting triggered in your React Routes
• detect the default browser language to set it at app loading time.

Use Context and React Routes

My sample app will have two routes (Home and About). When we trigger a language change, what will happen is that the change is not been propagated to the entire app. How to solve this? We need to have a Context at the root level. Let’s call it userLanguageContext:

We have a variable language that tracks the selected language and a setLanguage which sets the value of language. We initialize the value of language using a function to detect the default language of a browser:

The function checks if we have previously saved on localStorage the language preference. If so, it uses the preference, otherwise, it will detect the language from the browser, check if it’s available on our dictionary (language.js file) and select it. If the language is not available, it will default to English.

I will use react-router-dom to manage the routes of my app (Main and About). The code in the App.js file is now the following:

If you run the app, you can navigate between the About and Home pages.

Add Switch Languages Button

We want our users to be able to switch languages on our website and when they do, we want the switch to be instantaneous. The idea is to add a select button that changes the language calling i18n.setLanguage function. Let’s see the code:

I am importing the context on the Home component because when I call onLanguageChange the function will update the context calling setLanguage and it will trigger a State update which is propagated from the root of the application downwards. When the user will change the route by clicking on the About Us link, the page will be in the selected language.

Wrapping up

Amazing, your React app works in different languages and your users can choose their language as they prefer 🌎

The code is available at https://github.com/enricop89/amplify-react-localized-app

If you liked this article, you may want to clap for it because it would help me out a lot. 🍕

Follow me on Twitter and Youtube for more!