GT Libraries

Automatically translate your project with GT Libraries

Overview

This tutorial will show you how to automatically manage your project's translation files when using gt-next or gt-react.

Note: This should only be used when you are shipping a production build. If you are using the GT Libraries in development, this command is not needed.

We will follow these 4 steps:

Add your environment variables

Install gtx-cli

Initialize your project with the gtx-cli init command

Tip: Avoid the hassle of using translation files with the <T> component.


Step 1: Add your environment variables

Add your production API key and project ID to your environment variables. This is necessary to use the gtx-cli tool. You get these from the General Translation dashboard.

.env
GT_API_KEY=<your-api-key>
GT_PROJECT_ID=<your-project-id>

Step 2: Install gtx-cli

Install the gtx-cli tool in your project.

npm i --save-dev gtx-cli

Step 3: Initialize your project with the gtx-cli init command

Run the gtx-cli init command to configure your project.

npx gtx-cli init

Step 4: Add the gtx-cli translate command to your build process

Add the gtx-cli translate command to your build or CI process before the build command to automatically add translations to your project.

package.json
{
  "scripts": {
    "translate": "npx gtx-cli translate",
    "build": "npm run translate && <your build command>"
  }
}

This will generate translations for all of your locales and save them to your project. If you want to commit these files to your repo, you can instead run this command before committing.

You're done! Now your project will automatically update all of your translation JSON files any time your project changes.


Notes

  • You can automatically add translations to your project with the gtx-cli translate command.
  • If you want to commit your translation files, you can instead run the gtx-cli translate command before committing.
  • To configure the output path for your translations, see the configuration docs.

Next steps

  • See the usage guide for the cli tool.
  • If you want to see live translations in development (think hot reload), check out the <T> component.

On this page