Localize your app the modern and developer-friendly way!
Do you have an app that you use and you want to localize it? Localizing is very important to ensure that all people can use your app with ease. With Localazy and LinguiJS you can achieve it easily (and for free)!
Localazy is a free translation management system to help developers and translators focus on their jobs and make the translation process seamless. It provides a pro-active translation memory called ShareTM which provides highly accurate automatic translations for even easier localization.
Let’s start with the React app. Create a new project with the following command:
Open the newly created project and install LinguiJS for in-app translation management.
Localazy setup and integration
Sign up on Localazy and create a new app. I will use English as a source language, but you can choose any other. Then on the integration screen, select JSON. We will upload the source strings in a bit.
Afterwards, you can install Localazy’s CLI for Linux, MacOS or Windows.
Come back to your project. In the root folder, create a file called
and paste the following. Make sure to fill in your writeKey and readKey which you can retrieve from your app either under the settings tab or in the first step of the JSON CLI guide on the select integration screen.
Then, we need to create a file called
in our root directory. Fill it in as so, make sure to include whatever locales you use. In this article we’ll use en and es.
Afterwards, we need to do a little modification to your
file. Add the following command:
Now, we can create a
folder. This is the folder in which we will store all of our locale files. Create a file called
folder and paste the following:
You can change these as you please. That’s just an example of the kinds of things you can do. We are almost ready. Let’s upload the source English phrases to Localazy. Run
and you should see your strings on the project screen (you need to refresh the page). ✨ Magical! ✨
Go to Settings and scroll down. You should see three options. Make sure
Use community translations (ShareTM)
is switched on.
Learn more about how ShareTM works.
At this point, you may add new languages, for which you can use automatic or manual translations. Automatic translations use highly accurate community translations, so they are generally very precise. However, they support translations only from English at the moment, so you need to have the English language added. It does not have to be your source language though.
Before downloading, you need to review automatically translated strings. Otherwise, they have only a candidate status and won’t be published. In case you, as an owner, translate anything, the strings are automatically accepted without the review process. Try to add Spanish language and review the suggested phrases or translate them manually (it does not need to be proper Spanish).
npm run localise
to download these new files and set them up with LinguiJS. And just like that, your app is almost done! It’s time to get into the nitty-gritty.
Using Localazy translations with LinguiJS
Here, we are going to give a brief example. LinguiJS already has an amazing guide here
file, add these lines:
Change these imports to match your project. We are just creating a basic welcome page.
And in your
file, paste this:
As you can see, to translate with Lingui, we have surrounded the keys with the
You may check out the final repo here. Remember, this is just a sample, you will have to tweak this to fit into your application, however, this is a great first step to ensure that your project is ready to be localized and allow everyone to use your app, regardless of what languages they speak.
As always, please post your questions, comments, and concerns below.
Previously published at https://localazy.com/blog/how-to-localise-your-react-app-with-linguijs-and-localazy
Create your free account to unlock your custom reading experience.