Adding a new language to LiteFarm
1. Infrastructure Setup ( ~20hrs)
To setup infrastructure we followed the guide by React-i18Next, following these steps
Install
i18next
andreact-18next
using the commandnpm install react-i18next i18next i18next-parser --save
i18next-parser will allow a user to scan for new translations in any part of the webapp, using either the
useTranslation
hook or thewithTranslation
Higher Order Component. For example, if I have at('KEY_A')
which is not located in thelang/en/translation.json
runningnpm run i18n
will create a new entry in thetranslation.json
.Create the base configuration file needed to run the parser script taking this as base template, the only modifications done were changing the defaultValue (which is the value that the parser will use for any translation not found) to “MISSING” and adding locales for
en, es, pt and fr
.Run in webapp
npm run i18n
Insert
withTranslation
HOC anduseTranslation
hooks in every component in the app.TAG every Label, or visible text in the app with an appropiate key. Try to separate the views in different objects of the translation For example, if working on a login component wrap every translation for the Login in a “LOGIN” object, you can find various examples of this practice in the current translation.json.
Re-run
npm run i18n
and checkout thelang/en/translation.json
which will have all tags that were added.Translate those tags within the translation file.
WHEN YOU : Add new components, Add more text or Find text that has not been translated Perform steps 6 to 8 in the case no new component was added, or 5 to 8 in the case a new component was added.
2. Adding a new language or dialect (~30mins)
Adding a new language or dialect after the initial configuration was done should be a simple process.
Include the new language locale (using the first 2 letters of it) in the locales array located in the
i18next-parser.config.js
which looks like this. In the case of a dialect, please concatenate the language and the locality, for example ‘pt’ for Portuguese Brazil.locales: ['en', 'es', 'pt', 'fr']
Run
npm run i18n
which should create a new folder with several fileslang/[your_locale]/[translation_namespace].json
some of the current namespaces are: common, geneder, message, role, translation, etc..Under this new folder, replace the
en
folder contents with the newly created folder contents. With this you will make sure you have all of the current namespaces, and will provide context on what you are translating.In your newly created file, change usages of the word
english
to your new language e.gportuguese
Modify the
lang/i18n.js
file, to include the new locale in the app.Import the index you modified doing (using pt as example)
import portuguese from './pt;
Include the new locale in the resources object, like so:
After that you can proceed to translate the files that were created and making a PR on our repo as described in the next section