Deploying to Production (5m)

Overview

This is a short tutorial to help you deploy your react app with GT.

We will do this in 3 steps:

Prerequisites

Make sure that you have followed the Quick Start Guide to set up your react app with GT.

Step 1: Switch to your production API keys 🔑

Add your production API key and Project ID to your production environment variables.

From your dashboard, go to API Keys in the sidebar. Click on Create API Key, and add them to your production envrionment.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Step 2: Share your configuration with your app ⚙️

The translate command will generate a configuration file in the root.

Pass the config file to <GTProvider>. If you have specified any locales in your provider, remove them. The configuration file will take care of that.

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
import config from "../gt.config.json";  
 
export default function App() {
  return (
    <GTProvider {...config}>
      <MyApp />
    </GTProvider> 
  );
}

Step 3: Add the translate command to your build script 🏗️

The last step is to add the translate command to your build script. Make sure that the translate command comes before the build command.

Specify the locales that you would like to ship to production.

{
  "scripts": {
    "build": "npx gt-react-cli translate --locales fr zh && <YOUR_BUILD_COMMAND>"
  }
}

Here, we have added French and Chinese to our configuration.

That's it! You are now ready to deploy your react app with GT!

Next steps

• Follow this guide on How to Manage Locales.
• Learn how to Translate Strings.
• Learn about the <T> component.