
[GitHub Actions](https://github.com/features/actions) is a new way for developers to automate their work.
Actions are simple, yet powerful, pieces of code that can be written in
any language, and run in the cloud. They're designed to help you ship great software faster by enabling your whole team to collaborate
on building and maintaining automation pipelines.

![Github Actions Market - Upload Translations from File Action](/blog/upload-translations-action-on-github-actions-market.png)

[GitHub Actions integration for Continuous Localization](https://simplelocalize.io/docs/integrations/github-actions/) is available on GitHub Market! Connect your GitHub repository to SimpleLocalize i18n editor for free!
The integration with GitHub Actions enables customers to build a workflow where content is automatically added to SimpleLocalize i18n editor.
You can import translations on every branch update or just on pull request. Mange, edit, or review translations in SimpleLocalize Editor and once you are ready, push them to the CDN or save changes and download using GitHub Actions.

## How to start?

It's simple, create a new yml file in `.github/workflows` directory and put SimpleLocalize actions code to download or upload file with translations.

![Github Actions - example download translations action](/blog/download-translations-to-github-repository-github-actions.png)


## Resources:
- [Sample Project with continuous localization](https://github.com/simplelocalize/sample-github-action-project)
- [Upload Action](https://github.com/simplelocalize/upload)
- [Download Action](https://github.com/simplelocalize/download)

GitHub Actions available!

How to start?

Resources:

GitHub Actions is a new way for developers to automate their work.
Actions are simple, yet powerful, pieces of code that can be written in
any language, and run in the cloud. They're designed to help you ship great software faster by enabling your whole team to collaborate
on building and maintaining automation pipelines.

Github Actions Market - Upload Translations from File Action

GitHub Actions integration for Continuous Localization is available on GitHub Market! Connect your GitHub repository to SimpleLocalize i18n editor for free!
The integration with GitHub Actions enables customers to build a workflow where content is automatically added to SimpleLocalize i18n editor.
You can import translations on every branch update or just on pull request. Mange, edit, or review translations in SimpleLocalize Editor and once you are ready, push them to the CDN or save changes and download using GitHub Actions.

How to start?

It's simple, create a new yml file in .github/workflows directory and put SimpleLocalize actions code to download or upload file with translations.

Github Actions - example download translations action

Resources:

Sample Project with continuous localization

Upload Action

Download Action


---
title: i18next and React application localization in 3 steps
image: /blog/i18next-localization-guide-with-translation-management.jpg
date: 2020-10-01
modified: 2024-02-26
author: Jakub
tags: ['react', 'i18next', 'i18next-backend', 'tutorial', 'continuous-localization', 'developer']
excerpt: "How to localize ReactJS application with i18next internationalization library. Learn how to manage localization in software project"
---


## i18next - Background
We took original post inspiration from an awesome guy called [Aryclenio Xavier Barros](https://dev.to/aryclenio), who presented a sample app for localizing app with i18next. You can [read it here](https://dev.to/aryclenio/internationalizing-your-react-app-with-i18next-43op).
We expanded the idea by adding a section about integrating i18next with translation management system.


## How to start with i18n in ReactJS?

Thanks to that ReactJS is super popular library, we got so many options. The most popular i18n libraries are i18next and yahoo/react-intl. Today, I will show you how to integrate i18next into your ReactJS application.

## Create a sample project

I will start with very beginning, and I will create sample app in ReactJS with TypeScript

```bash
yarn create react-app simplelocalize-i18next-example --template typescript
```

## Install dependencies

```bash
# Using NPM
npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector axios

# Using yarn
yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector axios
```

Now we are ready to start!

## Configuring i18next

I will create `i18n.ts` file where I will put whole i18next configuration, and after that, we will import this file in `index.ts`.
My `i18n.ts` looks as following:

```tsx
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import axios from "axios";


const isProductionCode = process.env.NODE_ENV === 'production';
const fallbackLanguage = 'en'

const projectToken = "XXXXXXXXXXXXXX"; // YOUR PROJECT TOKEN
const apiKey = "XXXXXXXXXXXXXX"; // YOUR API KEY

const apiBaseUrl = "https://api.simplelocalize.io/api";
const cdnBaseUrl = "https://cdn.simplelocalize.io";
const environment = "_latest"; // or "_production"
const loadPath = `${cdnBaseUrl}/${projectToken}/${environment}/{{lng}}`;
const loadPathWithNamespaces = `${cdnBaseUrl}/${projectToken}/${environment}/{{lng}}/{{ns}}`;
const configuration = {
    headers: {
        'X-SimpleLocalize-Token': apiKey
    }
};

const createTranslationKeys = async (requestBody: any) => axios.post(`${apiBaseUrl}/v1/translation-keys/bulk`, requestBody, configuration)
const updateTranslations = async (requestBody: any) => axios.patch(`${apiBaseUrl}/v2/translations/bulk`, requestBody, configuration)

const missing: any[] = [];
const saveMissing = async () => {
    if (missing.length === 0 || isProductionCode) {
        return;
    }
    console.info(`Saving ${missing.length} missing translation keys`);

    const translationKeys = missing.map((element) => ({
        key: element.translationKey,
        namespace: element.namespace,
    }));

    await createTranslationKeys({translationKeys})
        .catch((error) => console.error(`Error during creating translation keys: ${error}`));

    const translations = missing.map((element) => ({
        key: element.translationKey,
        namespace: element.namespace,
        language: element.language,
        text: element.fallbackValue,
    }));
    await updateTranslations({translations})
        .catch((error) => console.error(`Error during updating translations: ${error}`));
    missing.length = 0;
}

setInterval(async () => {
    await saveMissing();
}, 30_000); // decreasing this value may lead to the API rate limit


i18n
  .use(Backend)
  .use(LanguageDetector)
  .use (initReactI18next)
  .init({
    fallbackLng: fallbackLanguage,
    backend: {
      loadPath: loadPath, // or loadPathWithNamespaces, if you use namespaces
    },
    saveMissing: !isProductionCode,
    defaultNS: "", // you can set default namespace here
    missingKeyHandler: async (languages, namespace, translationKey, fallbackValue) => {
        console.debug(`[${namespace}][${translationKey}] not available in Translation Hosting`);
        missing.push({
            translationKey: translationKey,
            namespace: namespace ?? "",
            language: languages[0] ?? fallbackLanguage,
            fallbackValue: fallbackValue ?? ""
        });
    }
  })

export default i18n;
```

## Project `loadPath` variable

Create a [SimpleLocalize.io](https://simplelocalize.io) project to get your unique `loadPath` variable. For this demo project, you can use the `loadPath` from the example above!


## Create missing translation keys automatically

I used property `saveMissing` with value `true` to tell i18next to function `missingKeyHandler` to automatically when the library won't find a translation key.
Create on backend missing translation keys with default translation.



## Enable `i18next` in application

Configuration is completed when you import `i18n.ts` file in `index.ts` just by adding `import './i18n';` Whole `index.ts` file should look like this:

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // import i18next configuration (!!)

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);
```

We are done! i18next library is ready to use.

## Using translations in the app

Now, let's use translations, and create a basic web page.

## Import `useTranslation` hook

To import the i18next hook, we use the following code:
```tsx
import {useTranslation} from "react-i18next";

function App () {
  const {t, i18n} = useTranslation ();
  //...
```

The `t` variable is a function used to load translations for a given key.

## Using `t` in application code

`t` usage is very simple and clean:
```jsx
t("USE_BUTTONS_BELOW")
```

in HTML, it would look like the following:

```tsx
 <p>{t("USE_BUTTONS_BELOW")}</p>
```

## Switching between language

Now it's a time to add option to switch languages. I will use simple buttons without any fancy CSS styles. :) I added 3 buttons for English, Spanish and Polish language.

```tsx
import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();
  return (
    <div>
          <p>
            {t("USE_BUTTONS_BELOW")}
          </p>
          <button onClick={() => i18n.changeLanguage("en")}>English</button>
          <button onClick={() => i18n.changeLanguage("es")}>Spanish</button>
          <button onClick={() => i18n.changeLanguage("pl")}>Polish</button>
        </div>
  );
}

export default App;
```

## Let's check it!

Notice that translation is done in real-time! How cool is that? Very cool!

![React Localization with i18next](/blog/i18next_localization_with_SimpleLocalize.gif)

[see live version](https://i18next.simplelocalize.io)

Project code is available on [GitHub](https://github.com/simplelocalize/simplelocalize-i18next).

i18next and React application localization in 3 steps

How to localize React app using i18next

How to translate a webpage:<br/>User and Developer Guide

---
title: "Cloudflare Workers and Website Localization (2/5)"
image: /blog/data-i18n-key/extracting-data-i18n-key.jpg
date: 2024-04-17
modified: 2024-09-11
author: Jakub
tags: ["developer", "cloudflare", "integration", "tutorial"]
excerpt: "In this tutorial, how to extract translation keys and translations from a HTML website and upload them to SimpleLocalize using the SimpleLocalize CLI."
---

[In the previous tutorial, we've shown you how to use Cloudflare Workers to localize any website with no additional dependencies](/blog/posts/cloudflare-website-localization).
Today we will show you how to extract translation keys and translations from HTML files and upload them to SimpleLocalize using the [SimpleLocalize CLI](/command-line-tool/).

Let's get started!

## Prerequisites

Before you begin, you will need a SimpleLocalize account, and a website with 'data-i18n-key' attributes in HTML elements containing the strings that need to be localized.
HTML files must be stored in a directory that the SimpleLocalize CLI can search for.

## How it works

We will run a command-line tool that will find all translation keys and translations in HTML files to store them
in a JSON file. The JSON file will be uploaded to SimpleLocalize where you will be able to manage translations.
From there, you can auto-translate the keys and translations and publish them to the CDN to serve localized content to the users,
thanks to the Cloudflare Workers that we have configured in the previous tutorial.

![How Cloudflare Workers and SimpleLocalize CLI work together](/blog/data-i18n-key/how-it-works.jpg)

## Sample website

For this tutorial, we will use a [simple HTML website with a few strings](https://github.com/simplelocalize/simplelocalize-cloudflare-workers)
that we have created before. It has a few strings with 'data-i18n-key' attributes that need to be localized, and three buttons to switch between languages.

![Static HTML website hosted on GitHub Pages](/blog/cloudflare-workers/github-hosted-unlocalized-website.jpeg)

Example of the HTML element with the 'data-i18n-key' attribute:
```html
<a data-i18n-key="read_integration_post">Read integration post</a>
```

## Setting up SimpleLocalize CLI

Before we configure the CLI, we need to create a new project to get the API Key for it.

![Empty SimpleLocalize project](/blog/data-i18n-key/empty-project.png)

Then, we need to install the SimpleLocalize CLI. You can do it using one of the following commands depending on your operating system:
```bash
# macOS / Linux / Windows (WSL)
curl -s https://get.simplelocalize.io/2.6/install | bash

# Windows (PowerShell)
. { iwr -useb https://get.simplelocalize.io/2.6/install-windows } | iex;
```

Once it's done, you can run the following command to verify the installation:

```bash
simplelocalize --version
```

and you should see the version of the CLI, for example:

```bash
Version: 2.6.0 (aarch64)
Releases: https://github.com/simplelocalize/simplelocalize-cli/releases
```

Next, let's create a configuration file for the CLI, in the main folder of our website project, and name it `simplelocalize.yml`:

```yaml
apiKey: YOUR_API_KEY

projectType: simplelocalize/data-i18n-key
searchDir: ./public

uploadPath: ./extraction.json
uploadFormat: simplelocalize-json
uploadOptions:
#  - 'REPLACE_TRANSLATION_IF_FOUND' # overwrite translation for given a key and namespace if found
```

Replace the `YOUR_API_KEY` with your SimpleLocalize API key. You can find it in the ['Settings > Credentials'](/docs/cli/get-started/#authorization) section of your project.

In the configuration, we have specified the following options:
- `projectType` - type of project that the CLI will use to extract translation keys and translations,
- `searchDir` - directory where the CLI will search for matching files for the project type,
- `uploadPath` - specifies the file which should be uploaded,
- `uploadFormat`- specifies the format of the file that will be uploaded,
- `uploadOptions` - additional options for the upload process, e.g., `REPLACE_TRANSLATION_IF_FOUND` to overwrite translations if found.
By default, translations will only be added if they are not found.

You can learn more about the configuration options in the [Getting started with CLI](/docs/cli/get-started/) page.

## Extracting translation keys and translations

Now, we can run the following command to extract translation keys and translations from the website and upload them to SimpleLocalize:

```bash
simplelocalize extract
```

The CLI will search for all HTML files in the `./public` directory and extract translation keys and translations from the elements with the `data-i18n-key` attribute,
and store them in the `extractions.json` file. Next, we will upload the file to SimpleLocalize:

![Uploading translations with CLI](/blog/data-i18n-key/uploading-translation-files-data-i18n-key.png)

```bash
simplelocalize upload --languageKey en
```

The CLI will upload the `extractions.json` file to the SimpleLocalize project specified in the configuration file.
The `--languageKey` option specifies the language in which the translations have been extracted.
Make sure to replace `en` with the correct language code, and make sure that the language exists in the project.

After the upload is complete, you can see the translation keys and translations in the SimpleLocalize Translation Editor.

![Uploaded translations in the Translation Editor](/blog/data-i18n-key/uploaded-translations-data-i18n-key.png)

## Managing translations

From now on, you can manage translations in the SimpleLocalize Translation Editor. You can add more languages to the project
and run auto-translation to translate the content. Once you are done, you can publish the translations to the CDN to serve localized content to the users.
The Cloudflare Workers that we configured in the previous tutorial will handle the routing and serve the localized content based on the user's preferred language.

## Conclusion

In this tutorial, we've shown you how to extract translation keys and translations from a website and upload them to SimpleLocalize using the SimpleLocalize CLI.

In the following tutorials, we will show you how to:
- use the `accept-language` header to detect the user's preferred language,
- use the Cloudflare Workers KV to store and serve the localized content, and
- configure Worker routes to match your website domain and path.

Stay tuned for the next tutorials!


Translation Editor

AI Translations

Automations

Auto-translation

Translation Hosting

SimpleLocalize CLI

REST API

Alternative translations

GitHub Actions available!

How to start?

Resources:

Relevant posts

i18next and React application localization in 3 steps

How to localize React app using i18next

How to translate a webpage: User and Developer Guide

Cloudflare Workers and Website Localization (2/5)