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.

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.

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 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.

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.

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.

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

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.

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

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