How I Support Over 100 Languages in My React app...and You Can Too!

Rate this content
Bookmark
SlidesGithub

Does your React app serve a global audience, but is only available in English? Let's change that. In this talk, I'll show you how i18n can become an automatic part of your CI/CD workflow, enabling your team, regardless of size, to deliver your React app in over 100 different languages without any extra effort.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

FAQ

The main problem addressed is that most websites and web apps only publish content in one language, which is not convenient or inclusive for users who speak different languages.

Richard Kerrigan works at Microsoft but is not affiliated with the Azure AI team, nor is he trying to convince users to adopt Azure for cloud services.

The goal is to demonstrate a solution for automatically translating dynamic website content into multiple languages and dialects using Azure AI Translator or similar services from other cloud providers.

Limitations include the inability to handle MDX or JSX/TSX file types, horizontal text translation only, and the need for human validation of translations.

JSON content can be translated at runtime using the Azure Translator API, potentially through a React server component or a custom API that caches translated content.

The solution involves incorporating the translation process into the CI-CD workflow, using Azure Blob Storage and Azure Function App to orchestrate and handle translations.

Yes, similar solutions can be built using AWS, GCP, or other cloud service providers that offer document translation services.

He suggests validating the translated content in a test environment before deploying to production to ensure accuracy and make any necessary adjustments.

Benefits include inclusivity for diverse language speakers, cost-effectiveness with a free tier, accuracy with Neural Machine Translation, and customization with glossaries.

Key features include support for over 100 languages and dialects, a generous free tier of up to 2 million characters per month, Neural Machine Translation for accurate translations, and the ability to use custom glossaries.

Richard Carrigan
Richard Carrigan
28 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
I'm Richard Kerrigan, and I'm thrilled to be here today to show you how you can add multilingual support into your React apps. The problem we're trying to solve is that most websites, web apps, only publish content in one language, which is not convenient for users and is not inclusive for people for whom that language is not their primary language. We need a way to support other languages and dialects on our websites and web apps without adversely affecting our team's productivity. Now there are various ways we could approach solving the problem, depending on the resources we have available to us. But for the sake of this talk, let's assume that we don't have much budget to dedicate to this feature, nor do we have a team that can translate content for us. This is a fantastic use case for AI and automation. When my team started tackling this problem, we found the Azure AI translator service. It offers ad hoc text translation and document translation, with key features such as language support, cost-effectiveness, and accuracy. It also allows the use of custom glossaries to tweak the translation process. However, there are some limitations, such as compatibility with certain file types and the need for result validation and possible tweaking. Let's now focus on designing the workflow for translating content stored as JSON. Here's an example of how you could achieve this. We're taking the pieces of data that need to be translated and sending each piece through the translator. Then, we send the translated content as a response. For JSON content, the translation can be done at runtime in a React server component or an API route. For HTML or Markdown files, the translation can be incorporated into the CI-CD workflow, involving Azure Blob Storage, Azure Function App, and the app's source code files. Instead, we've moved the translation process to our GitHub Actions workflow. We provision the necessary resources in Azure, build and deploy the function app, and then perform the translation process. We configure the translation endpoint, specify the glossary for tweaking translations, and execute the translation. Once the translation is complete, we create a new blob in the output location. Our GitHub workflow ensures that all translations are done before proceeding to the next step, where we upload and download the artifact for deployment. This ensures that all content is translated and avoids errors for missing files. When setting up the translation process, it felt like magic. The pipeline for translating Markdown content is the same as for HTML content. The difference lies in how the metadata is handled. In HTML, the metadata is stored in the head of the file, while in Markdown, it is within the front matter section. When translating HTML files, the head needs to be translated as part of the process. For Markdown files, the metadata needs to be translated separately due to issues with Azure AI Translator. The translation function parses and translates the original files' metadata, then combines it with the translated files' content. The GitHub actions workflow provisions Azure resources, builds and deploys the function app, and runs the translation process for both HTML and Markdown files. The process is now deploying the ARM template that includes the necessary resources. We discussed the problem of limited language support on websites and web apps, the benefits of Azure AI Translator, and alternative solutions. We also explored different versions of the app for translating JSON, HTML, and markdown content without learning a new language. If interested, you can find more information and resources on GitHub and Azure AI Translator. The workflow is now deploying and translating the markdown files. It ensures all files are translated before deployment. Once the translation is complete, the files are put back into the repository. The deployment process guarantees the presence of all necessary resources. After a brief wait, the web app is ready to be viewed. The blog contains multiple posts. The metadata provides the title and excerpt for each post. The markdown is parsed into HTML for rendering. Formatting is preserved in different languages. Feel free to connect with me on LinkedIn or X.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

How do Localise and Personalize Content with Sanity.io and Next.js
React Advanced 2021React Advanced 2021
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Top Content
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
End-to-end i18n
React Advanced 2021React Advanced 2021
26 min
End-to-end i18n
Thanks for joining my talk on end-to-end internationalization. I'll walk you through internationalizing a React app, covering translated strings, currency and date formatting, translator management, and injecting translated strings back into the app. The constants used throughout the app define localization settings and translations. The React Intel library is used for managing translations, and custom functions are created for consistent date and number formatting. The translation process involves extracting strings, using tools like PO Edit, and compiling the translated strings into JSON files for the React app.
Building JS Apps with Internationalization (i18n) in Mind
JSNation 2022JSNation 2022
21 min
Building JS Apps with Internationalization (i18n) in Mind
This Talk discusses building JavaScript apps with internationalization in mind, addressing issues such as handling different name formats, using Unicode for compatibility, character encoding bugs, localization and translation solutions, testing in different languages, accommodating translated text in layouts, cultural considerations, and the importance of enabling different languages for users. The speaker also mentions various open source tools for internationalization. The Talk concludes with a reminder to avoid assumptions and embrace diversity in the World Wide Web.
Emoji Encoding, � Unicode, & Internationalization
JSNation Live 2020JSNation Live 2020
34 min
Emoji Encoding, � Unicode, & Internationalization
This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.
Internationalizing React
React Summit Remote Edition 2021React Summit Remote Edition 2021
29 min
Internationalizing React
The Talk discusses the challenges of adding and maintaining new languages in a React application and suggests ways to make the process easier. It defines internationalization as the process of architecting an application for localization and explains that localization involves adapting the content and experience for a specific locale. The speaker recommends using libraries for internationalization and provides resources for learning more about the topic. The Talk also addresses edge cases and difficulties with multiple dialects or languages, translation processes, and right-to-left CSS libraries.
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
React Summit 2022React Summit 2022
8 min
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.

Workshops on related topic

Localizing Your Remix Website
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Harshil Agrawal
Harshil Agrawal
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps