Localizing react app with FBT instead of i18n

I recently changed all our boilerplates and projects from i18n to FBT. I found that this is the best choice today when working with others. I’ll explain why.

Image from https://www.brihaspatitech.com/blog/how-to-localize-react-js-web-app/

As all of you know, localizing your app is very important to scale your service globally. Many developers might have suffered in doing this job after the app has released because it is pretty hard to find and replace texts that are not localized because there aren’t exact patterns to find texts that are not yet localized. Therefore, I usually did this from the beginning. I’ve not had big problems doing this job with i18n-js and have been using this library for more than 4 years now.

Image from https://dev.to/devabhijeet/i18n-for-react-applications-3c9n

The Problem

I had problems using this when I had co-workers who should also do localizations during the development.

1. Above is a sample problem on localization when multiple developers work on localizations together. LOGIN and SIGN_IN has the same value but different keys as well as PW and PASSWORD.
2. In git, en.json and other translation files are always in charge of reviews while other features are much more important (lose focus).
3. Some of the translation files will be missing the keys. I use to fix this problem with a great library, eslint-plugin-i18n-json by godaddy. I also had a chance to use lokalise which is a premium service.

I used to have the above problems when localizing my app when working with others. However, I had not thought of any better idea of how to avoid those. Then I’ve found fbt.

Image by https://pagepro.co/blog/react-tldr/translate-your-react-app-with-ease-using-facebooks-own-framework-fbt/

This localization library from Facebook fixed all the concerns I had above. However, it is not easy to use for the first time when you are not familiar with this. I want to help you out with the installation.

Let’s install FBT in your react app

yarn add fbt && yarn add -D @babel/node babel-plugin-fbt babel-plugin-fbt-runtime fbt-generate-translations

1. Configure babel plugin

plugins: [
  'babel-plugin-fbt-runtime',
  [ 'babel-plugin-fbt', {
    fbtEnumPath: path.join(__dirname, '.enum_manifest.json'),        
    extraOptions: { __self: true },
    },
  ],
],

2. Structure translation

Add your translations. I’ve added this in assets/translations/*. Then also decide where the generated translation from FBT will be located. For me, I put that in assets/translatedFBT.json. You don’t need to manually create translatedFBT.json file since this will be created when we run the fbt script which we will add later.

Note that you do not need to translate the default locale. However, you need them for jest to remove the warning message that the translation file does not exist.

3. Add FBT util

For typescript users, you may use @types/fbt since type for fbt is not still in DefinitelyTyped.

4. Initialize FBT in your project

Put below code in App.tsx which would be your root file.

import { initFbt } from './utils/fbt';
initFbt();

5. Add FBT scripts to package.json

"manifest": "babel-node node_modules/.bin/fbt-manifest --src src",
  "collect-fbts": "babel-node node_modules/.bin/fbt-collect --pretty --manifest < .src_manifest.json > .source_strings.json",
"collect-fbts": "babel-node node_modules/.bin/fbt-collect --pretty --manifest < .src_manifest.json > .source_strings.json",
"translate-fbts": "babel-node node_modules/.bin/fbt-translate --translations assets/translations/*.json --jenkins > assets/translatedFbts.json",
"fbt-all": "yarn manifest && yarn collect-fbts && yarn translate-fbts"

As you can see, there are three steps in generating translation with FBT. Firstly, when you run manifest, it will collect fbts in your project and generate .enum_manifest.json and .src_manifest.json files.

Secondly, when you run collect-fbts, it will collect those fbts in manifest files. This will generate .source_strings.json .

.source_string files contains generated hash keys for translations.

With the hash keys generated in .source_string file, you need to add that to your translation file manually. This is a pretty frustrating step but still, this is very useful that this process is only needed when you wish to translate. Otherwise, you don’t need to run fbt scripts.

You need to put hashKey manually to translated files.

Lastly, when you run yarn translate-fbts, it will generate translatedFbts.json. Then you will have all translations in that file.

If you are using .git, you may ignore the below files since they are only used to generate the final translation file, translatedFbts.json which is only needed to localize your app.

.enum_manifest.json
.source_strings.json
.src_manifest.json

The result

English version

Korean version

If you are interested in starting your project with FBT, here is our boilerplate configured with FBT. https://github.com/dooboolab/dooboo-frontend-ts.

Thanks for reading 🙏.