
In today's globalized world, reaching a diverse audience is essential for the success of your app. Localization plays 
a crucial role in this process, allowing you to seamlessly adapt your app's content to different languages and cultures. 
However, keeping up with frequent updates and translations can be a time-consuming task. That's where SimpleLocalize 
translation hosting comes in. In this blog post, we will explore how to leverage SimpleLocalize to automate the process 
of updating app translations and save time on manual updates, making localization a breeze.

## Table of contents

## The power of localization and translations

Localization plays an important role in reaching a global audience. In a world filled with variety and consideration for cultural differences, adapting your app to different dialects and cultures is crucial. 

By localizing your app, you create a personalized experience that resonates with users on a deeper level, establishing trust and increasing user engagement. The process of localization not only removes language barriers but also demonstrates your dedication to recognizing and accommodating the diverse requirements and preferences of various users. It is a powerful tool that can help your app transcend borders and connect with users around the world.

![Languages in a localization project](/blog/project-languages-tab.png)

### Translation management challenges

Managing app translations manually can pose significant challenges, particularly when dealing with frequent updates. As an app evolves and new features are introduced, the content that requires translation keeps expanding. Coordinating translations across multiple languages can quickly become a time-consuming and error-prone task. Here are some of the most common challenges for handling translation updates:
- manual work on updating translation files
- tracking changes in translations
- ensuring consistency across all language versions
- coordinating collaboration with translators
- handling version control
- maintaining translation quality

These challenges make it clear that relying solely on manual translation management is not sustainable in a fast-paced development environment. That's where translation hosting comes in.

## Introducing SimpleLocalize Translation Hosting

Translation hosting simplifies app localization by **centralizing and automating the translation management process**. SimpleLocalize generates translation files for different environments, such as development, staging, and production. These files are conveniently available through a superfast CDN, allowing seamless integration into your app workflow.

Developers can automatically download updated versions whenever changes are made, **eliminating the need for manual updates**. See below for more details about SimpleLocalize translation hosting.

![Translation hosting feature](/blog/translation-hosting.png)

### How does translation hosting work?

**Translation Hosting is a content-delivery network (CDN)** that gives you the option to fetch translations in JSON from anywhere with lightning speed and use them without any additional configuration in your project. Here's a breakdown of how translation hosting works:

- **Automatic translation file generation and updates:** When you click the "Publish" button in our translation editor, SimpleLocalize generates translation files in JSON format. These files can be fetched automatically every time your app refreshes, ensuring that you always have the most up-to-date translations without any manual effort.

- **Fast translation retrieval:** With translation hosting, you can effortlessly fetch translations in JSON format from anywhere with remarkable speed. By using the CDN infrastructure, translations are readily available without the need for any complex setups.

- **Real-time translation updates:** Translation hosting allows you to update translations in your app without the need for redeploying your application. All translation messages are loaded directly from the cloud, ensuring that your app always reflects the latest translations.

> You can **create different translation hosting environments** for your project in SimpleLocalize and use different links for your development, staging and production environments, facilitating seamless updates between your various development stages.

By leveraging the translation hosting feature, you can simplify app localization and streamline the process of updating translations in your app. No manual deployments or file uploads are required, and your app always benefits from the most recent translations.

![Translation hosting different environments](/blog/translation-hosting-environments.png)


### How much does translation hosting cost?

Translation hosting offers a fast and secure solution for sharing translation files with the public. One of the advantages is that there are **no rate limitations**, so you can freely make requests without worrying about restrictions. This makes it a reliable choice for client-side applications as well.

Fetching data from **Translation Hosting is available in all pricing plans, including the free 'Community' plan**. Whether you choose the free plan or opt for a paid plan, you can enjoy the benefits of translation hosting without incurring any additional costs.

To determine the best plan for your project, you can [explore the different pricing options available](/pricing/). Each plan offers a range of features and resources to cater to different needs. You can take advantage of the **14-day free trial period** to experience the benefits of translation hosting firsthand and evaluate its suitability for your specific requirements.

### How are the translations updated automatically?

When using translation hosting, translations are updated automatically without any manual intervention. Whenever a change is made to the translations in the translation editor, clicking the "Publish" button triggers the generation of updated translation files in JSON format. These files are then seamlessly integrated into your app workflow. 

![Translation hosting schema](/docs/translations-hosting-schema.jpg)

With each refresh of your app, the latest version of the translations is automatically fetched from the translation hosting service. This ensures that your app always reflects the most up-to-date translations without requiring developers to manually download and update the files. 

Translation hosting streamlines the translation update process, saving time and effort for developers.

## Getting started with SimpleLocalize

Getting started with SimpleLocalize is quick and easy. Here's a step-by-step guide to help you get up and running:

- **Create an Account**: [Sign up for an account on SimpleLocalize's website](/register/). You'll enjoy a 14-day free trial, giving you time to explore and experience all the features.
- **Upload Your Translations**: Once you have an account, you can [start uploading your translations to SimpleLocalize](/docs/general/import/). There are multiple methods available for uploading translations, including JSON files, Excel spreadsheets, fetching translations using the CDN, or importing them via the API or CLI.
- **Translate and Collaborate**: Dive into the translation editor within SimpleLocalize. It's a user-friendly interface that lets you effortlessly manage keys, add languages, and even invite translators to join your project.
- **Set Up Translation Hosting**: To take full advantage of SimpleLocalize's translation hosting feature, refer to the detailed instructions in the next section.

By following these steps, you can begin leveraging the powerful features of SimpleLocalize to streamline your localization process and effectively manage your app's translations.

![SimpleLocalize translation editor](/blog/translation-editor.png)

### How to set up Translation Hosting?

When setting up Translation Hosting and integrating it into your existing app workflow, it's important to note that the configuration process may vary slightly depending on the specific library or framework you are using. However, the overall goal remains the same: fetching translations from SimpleLocalize's translation hosting using SimpleLocalize CDN.

Begin by understanding the **CDN access options provided by SimpleLocalize**. This allows you to fetch translations from selected environments and langauges. You can find detailed information on how to access translations via the CDN in the [SimpleLocalize documentation](/docs/api/read-translations/).

> Check out our step-by-step guide on configuring translation hosting using [FormatJS (react-intl) i18n library](/docs/integrations/format-js/).

## Automating translations with SimpleLocalize

Automating translations with SimpleLocalize is a game-changer for developers. With SimpleLocalize's automatic translation update process, the tedious task of manually updating translations becomes a thing of the past. Here are some compelling benefits of automating app translations with SimpleLocalize:

- Saves time by automating the translation update process
- Reduces the risk of errors and inconsistencies in translations
- Eliminates the need for manual tracking and updating of translation files
- Seamless integration of updated translations into the app workflow
- Flexibility in retrieving and updating translations through API integrations and CLI tools
- Streamlines the localization process for developers
- Ensures a consistent and accurate user experience across languages
- Increases developer productivity by freeing up time for other tasks
- Simplifies the management of translated content in the app
- Enhances overall app quality and user satisfaction with up-to-date translations

![Translation hosting](/docs/translation-hosting.png)


## Conclusion

With SimpleLocalize translation hosting, updating app translations becomes a seamless and automated process. By integrating SimpleLocalize into your app development workflow, you can save time, improve collaboration, and ensure accurate and up-to-date translations for your global audience.

Remember, the key to success in today's global market is not just reaching users in their own language, but providing an immersive and localized experience that resonates with their cultural nuances. Start automating your app translations with SimpleLocalize and unlock the full potential of your global user base.

Translation Hosting: How to update translations automatically?


[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 is available!


Software updates can be challenging and yet with every deploy, you must remember about updating your keys, translations, and content. Keeping all text up to date is a key for a perfect impression on the released features. How do you work with translations, do you keep them up to date with every release? See our tips below for the effective translation management. 

## Why should you keep an eye on translations with every software update?

No one likes to read empty keys instead of clean, nicely translated texts. But there are more reasons to watch and control the translation and localization process. They are both important for the overall perception of your site's content. Why is that so?

- **Untranslated keys make the worst impression of your product**. Using keys and texts, you communicate with your users — missing translations give the impression of carelessness, are unprofessional. You don't want your customers to think of you and your product in such categories, for sure. 
- When adding new features and translations to them, do not forget about localization. **Localized text show your customers that you care**. You want your software to be fully adjusted and tailored to the language they use in everyday life. Remember to adjust the content, names of the features and new options to your customers' culture.
- **SEO**. Not translated content or texts copied from an automatic translator are a nightmare for your Google ranking. When adding a new feature, do not forget to share it on your blog and social media too!
- **Not updated translations can be misleading not only for your customers but also for you and your team**. What did that “Disable All” button mean? Was it deactivating all updates or only part of them? If you are not updating texts on a regular basis, you will waste your time later to check and update all keys. 

## How to keep your software translations up to date?

First, plan it. Think of the translation process of your software, what are the weaknesses in your current solution, and how can you improve it? Who will be responsible for the translations, and at what stage of development? What the whole process should look like? 

![application source code with translated messages](/blog/find-and-upload-translations-in-source-code.jpg)

We prepared 3 tips that should help you in keeping the translation process on track. 

### 1. Planning translation process.

When adding new content or changing existing features, you need to remember about adding and updating translations in all languages. How to keep this process in track? 

The translation process needs to be controlled by a human being, though it is prone to errors or mistakes. However, to prevent any issues, make the process as easy and smooth as possible. Complicated operations, tasks in such small thing as it seems, makes the translations a secondary issue.

Start with simple steps. 
- When a development team makes changes, notify the person responsible for translations about new keys to translate. It can be done by the developer with email or automatically. With SimpleLocalize, notification about a new update are sent to selected users, so they can start working on translations.
- Translator translates the changes and publish to development or live environment.

### 2. Updating translations.

Updating translations directly in the code may be challenging, and it means that only developers can change them. Great if they have language skills, but what if you ask a professional translator for help? Imagine updating Excel files with translations, adding it to your code, again and again when a new feature is released. Not the best and fastest option to keep the process smooth and easy.

Instead, think of using an external **software to manage your translations online, in simple translation editor**. SimpleLocalize is a great help for all changes in translations that can be deployed immediately to your app with [SimpleLocalize CLI](https://simplelocalize.io/docs/cli/get-started/). You can **give access to the editor to any team member** to adjust translations in development environment only or in the live version. See the history of all changes, the latest releases and old text versions. Managing multiple languages in one place really helps in keeping translations up to date. 

![translation editor with deepl and google translate logo](/blog/cloud-translation-editor-with-deepl-and-google-translate.jpg)

### 3. Checking and removing unused translation keys.

When was the last time that you deleted unused translations? 
Over the years of creating and developing software, we add lots of new keys. However, we tend to forget about old translations that are no longer used, and to which we are unlikely to return. 

To keep translations up to date, check the age of your translations, if they are used or not updated in a long time. Outdated translations take storage and create disorder in your files. Especially when there are a bunch of such translations.

It may be difficult to check that information in the code, but in SimpleLocalize you can **check not used translations or those that are not updated or pushed to live version in a long time**. Just check the list and remove them from your code to clean up your software. 

![approved translation window with search and trash icon](/blog/how-to-find-unused-translation-keys.jpg)

## What to do next with translations?

**Start simple** — try the **[free version of SimpleLocalize](https://simplelocalize.io/register/)** to see how it can help you to manage your translations and keep them up to date. You can [register to SimpleLocalize](https://simplelocalize.io/register/) with one click and connect your project to update translations automatically in a nice-looking app. Are you ready to get started? 

For any questions about SimpleLocalize, do not hesitate to [contact Jakub](https://simplelocalize.io/docs/general/support/) directly, he knows it all about translations! 😎


How to keep translations up to date?



## 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 fallbackLanguage = 'en'

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

const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/{{lng}}`;
const addMissingTranslationsEndpoint = `https://api.simplelocalize.io/api/v1/translations`;

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use (initReactI18next)
  .init({
    fallbackLng: fallbackLanguage,
    backend: {
      loadPath: loadPath
    },
    saveMissing: true,
    missingKeyHandler: (lngs, ns, key, fallbackValue) => {
      // optional step
      const configuration = {
        headers: {
          'X-SimpleLocalize-Token': apiKey
        }
      };

      const requestBody = {
        content: [
          {
            key: key,
            language: fallbackLanguage,
            text: fallbackValue
          }
        ]
      }
      axios.post(addMissingTranslationsEndpoint, requestBody, configuration)
    }
  })

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


Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

Continuous localization

Translation Hosting: How to update translations automatically?

GitHub Actions is available!

How to keep translations up to date?

i18next and React application localization in 3 steps