Last updated:
5 min read
The most efficient way to internationalize your web app
Rakesh Potnuru
Author
0%
SHARE

The most efficient way to internationalize your web app

Developers have had a lot of trouble with localization. It can be difficult at times to create and manage localization strings, deal with external libraries, and more. What about having a one-stop shop for managing everything and making translation work easier?

Let's get started

I often write about amazing Open Source projects. Today I'd like to introduce you to Tolgee, another fantastic Open Source tool. Tolgee is a one-stop shop for project localization. Tolgee eliminates the requirement to choose an i18n library, editor, and platform. Everything you need to localize your project is included. Let's look at how you may get the most out of Tolgee in this article.

tolgee

Creating a project in Tolgee

Step 1:

  • Open the Tolgee app. You can join using your email and password, or you can immediately authenticate your account through Github.

tolgee login

Step- 2:

  • You will then be able to see the projects dashboard; click on + ADD located at the top-right corner of that dashboard.

projects dashboard

Step-3:

  • Name your project, choose the owner, add at least one language, choose base language and click save. Your project will be ready!

fill project details

Get a sample project

Read this section if you are just trying out Tolgee. If you already have a project, you can skip this.

  • Download a simple HTML and CSS template by clicking here.

  • View the HTML file in your browser. The template should look like this.

sample project

  • At the moment, this website is only available in English. Let's use Tolgee to add translations.

Integrating with tolgee

Let's start by creating an API key for our integration.

  • Navigate to the API keys dashboard in Tolgee.
  • To generate a new API key, click the + button at the bottom.

api keys dashboard

  • You can choose between many scopes here. Scopes help you manage your integration more effectively. This article contains more information about managing API keys. For the time being, pick all and click "Save."

scopes

Integrate tolgee in your project.

  • Go to the "Integrate" page of your tolgee project.

integrate icon

  • If you obtained the template from a previously shared link, select "Web," otherwise, select whichever framework your project is built with. Then, choose your freshly created API key.

choosing framework and API key

  • Now launch any IDE and open your project.
  • Make a file called index.js in the project's root directory. This file contains the tolgee integration code.
  • Open the index.html file and put the following tags above the closing 'body' tag before saving your modifications.
1<script src="https://unpkg.com/@tolgee/core/dist/tolgee.umd.js"></script> 2<script src="https://unpkg.com/@tolgee/ui/dist/tolgee-ui.umd.js"></script> 3<script src="index.js"></script>
  • Open the index.js file and paste the following code, replacing YOUR API KEY with your API key, and then save the modifications.
1// index.js 2const { Tolgee, IcuFormatter } = window["@tolgee/core"]; 3const tg = Tolgee.use(IcuFormatter).init({ 4 apiUrl: "https://app.tolgee.io", 5 6 // ############################################################ 7 // ## you should never leak your API key ## 8 // ## remove it in for production publicly accessible site ## 9 // ############################################################ 10 apiKey: "YOUR API KEY", 11 12 // in production mode this is where your 13 // exported translations are loaded from 14 filesUrlPrefix: "/i18n/", 15 defaultLanguage: "en", 16 inputPrefix: "{{", 17 inputSuffix: "}}", 18 watch: true, 19 ui: window["@tolgee/ui"].UI, 20}); 21tg.run();

Create translations

  • You can create translations for words by surrounding them with two curly braces. For example, {{Hello World}}. Now go ahead and put all the sentences and words that you want to translate in curly braces.
  • Now, go to your browser and refresh the page. If you ALT/OPTION + click on any word or sentence, the Tolgee UI will pop up, allowing you to modify or add translations immediately. Your tolgee project will save all data.

tolgee ui

  • Here is my translated web page 😍.

translated webpage

  • All of your translations can be found in your Tolgee project dashboard. So that you can edit translations directly from your Tolgee project dashboard.

translated strings

In-context translation on production application

Tolgee provides an opportunity to add/edit translations to a production application with the in-context feature.

Prerequisites

  • A production web application that integrates the Tolgee SDK.
  • Tolgee account and access to the project.

Tolgee extension

Install Tolgee Tools chrome extension. After installing you can access the extension by clicking on the tolgee icon.

tolgee tools extension

Using extension

  • Start your live website.
  • Launch the Tolgee extension.
  • Provide,
    • API url - Self-hosted Tolgee URL or, if you are using Tolgee platform, then fill https://app.tolgee.io
    • API key - The API key of your Tolgee project.
  • Now ALT / OPTION + click on any string to open Tolgee UI.
  • In the UI, add or edit translations.

That's it! Tolgee is amazing, right?


Share your opinion on Tolgee in the comments 👇.


Subscribe to my FREE newsletter.


LEAVE A COMMENT OR START A DISCUSSION

MORE ARTICLES

All types of POST Requests with API Tester mobile app

    6 min read

    sponsored

All types of POST Requests with API Tester mobile app

Post requests are the most common types of requests that we perform on the internet and it is very useful in our day-to-day work life. These methods are those which are used to transfer data from a web browser to the server. In this article, I will teach you how to test post requests using API Tester mobile app.

How to write tests in full-stack MERN web application

    9 min read

How to write tests in full-stack MERN web application

Only by writing tests can you understand the significance of testing. No coding Bootcamp or course, as far as I know, teaches you how to write tests. Writing tests may not be necessary for demo projects or coursework projects, but it is critical for real-world applications. So, in this Part 3 of the “Let’s build and deploy a full stack MERN web application” series, I’ll demonstrate how to write tests for ReactJs components and ExpressJs RESTAPI.

Subscribe to Newsletter

Weekly


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.

Monthly


  • Coming soon...