Celira Documentation

Introduction

Celira simplifies the localization process for developers by automating translation tasks and ensuring data security. Follow this guide to get started with Celira.

Requirements

• A ReactJS project built with either JavaScript (JSX) or TypeScript (TSX)
• Requires Node.js version 21.7.1 or higher.

Step 1: Create an Account

1. Visit app.celira.dev/register to create an account.
2. Activate your account by clicking the link in the confirmation email.

Once your account is activated, you can log in to the Celira dashboard.

Step 2: Download the Script

If you are a developer, go to the Script page to download the Celira script and generate your Script Key.

Supported Frameworks

At this time, Celira only supports ReactJS. Support for additional frameworks (e.g., Next.js) is planned.

Step 3: Running the Script

1. Download and extract the script archive.
2. Before running the script, create a backup of your project. Always run the script on a local copy of your project.
3. Navigate to your project directory and execute the script with the following command:

node celira.js /path/to/your/project

Step-by-Step Process

When you run the script, you'll be prompted to answer a few questions:

1. Select the project framework:
   At this time, the only available option is ReactJS.
2. Do you want to translate the text from variables? (yes/no):
   This option allows you to translate text stored in variables within your project code. The default answer is no.
3. Enter your API Key:
   Provide the API key that you generated from the Script page.
4. Select the initial language for the text elements:
   Choose from one of the 25 supported languages for your project's base language.
5. Enter the project name:
   This will be the name displayed in your dashboard. The project name must be unique and cannot be left empty.
6. Do you want to translate the text elements to another language? (y/N):
   By default, the answer is No. If you choose Yes (y), you'll be prompted to:
   • Select the translation language:
     Choose a target language from the 25 available. Ensure you don’t select the same language as the original, as this will consume translation credits unnecessarily.

Step 4: Translation Output

After completing these steps, the Celira script will generate a translations directory inside the src folder of your project. The structure depends on whether you opted to translate into additional languages:

• If you answered No to translating into another language, the translations directory will contain a JSON file for the original language.
• If you answered Yes, the directory will contain two JSON files: one for the original language and one for the translated language.

You will also find a translations.js file, which includes the necessary methods to integrate the translations into your project.

Step 5: Integrating Translations

In your React App.js file, you’ll need to integrate the Celira translation methods.

Before:

import LandingPage from "./landing-page";

function App() {
    return <LandingPage />;
}

export default App;

After:

You’ll need to wrap the content with the TranslationProvider from the translations.js file:

import LandingPage from "./landing-page";
import { TranslationProvider } from "./translations/translations";

function App() {
    return (
        <TranslationProvider>
            <LandingPage />
        </TranslationProvider>
    );
}

export default App;

Step 6: Enabling Language Selection

To enable language selection within your app, use the setLocale function from the translations.js file. It should be called with a string corresponding to the desired language code:

export const setLocale = (locale) => {
    LOCALE_TRANSLATED = locale.toUpperCase();
};

For example, to switch to English, use:

setLocale("EN");

Ensure the string matches the name of the JSON file in the translations directory (e.g., EN.json).

Final Notes

After following the steps, your project should be fully localized with Celira. You can download an example of a project translated with Celira here.

---

Best Practices

• Always backup your project before running the script.
• Run the script locally and test the output before deploying.
• Use the dashboard for managing translations and generating new ones in additional languages after the initial setup.