/react-tutorial

Primary LanguageJavaScript

Step 0 - Starting point

Let's start with a simple react app bootstrapped with Create React App and instrumented with a simple i18next setup thanks to react-i18next.

The translation files are hosted on the same server where the react app is hosted.

Use npm run start to run the app.

Step 1 - keep existing code setup, but synchronize with locize

Here, you basically keep the existing setup, like in Step 0 but are synchronizing the translation files with locize. This can be done on-demand or on the CI-Server or before deploying the app.

What to do to reach this step:

  1. in locize: signup at https://locize.com/register and login
  2. in locize: create a new project
  3. in locize: add "de" as additional language (this can also be done via API)
  4. install the locize-cli

use the locize-cli

Use the npm run syncLocales script to synchronize your local repository with what is published on locize.

Alternatively, you can also use the npm run downloadLocales script to always download the published locize translations to your local repository before bundling your app.

Step 2 - use the locize CDN

Here, the locize-cli is not used anymore. The app will be directly "connected" with locize.

The translations are dynamically fetched from the locize CDN.

This means you can change the translations without the need to adapt and deploy your app.

What to do to reach this step:

  1. install i18next-locize-backend
  2. adapt the i18next config, make sure you copy the project-id and api-key from within your locize project.
  3. remove the local locales (i.e. /public/locales)
  4. get the available languages dynamically and render the language switcher accordingly

Thanks to the use of the saveMissing functionality, new keys gets added to locize automatically, while developing the app.

Step 3 - more locize goodies

Here, you will add some extra locize goodies to further optimize the localization workflow.

What to do to reach this step:

  1. install the locize-lastused plugin
  2. install the locize plugin
  3. adapt the i18next config
  4. in locize: enable the auto-machinetranslation workflow

Thanks to the locize-lastused plugin, you'll be able to find and filter in locize which keys are used or not used anymore.

With the help of the locize plugin, you'll be able to use your app within the locize InContext Editor.

Lastly, with the help of the auto-machinetranslation workflow and the use of the saveMissing functionality, new keys not only gets added to locize automatically, while developing the app, but are also automatically translated into the target languages using machine translation.

Step 4 - production version with caching

Now, we prepare the app for going to production. There is to do just a little i18next config change.

What to do to reach this step:

  1. in locize: create a dedicated version for production
  2. in locize: Do not enable auto publish for that version and publish manually or via API or via CLI
  3. in locize: enable Cache-Control max-age​
  4. adapt the i18next config to read from environment specific settings (development vs. production)

Now, during development, you'll continue to save missing keys and to make use of lastused feature. => npm run start

And in production environment, saveMissing and lastused are disabled, and also the api-key is not exposed. => npm run build && npm run serve