DEV Community

Cover image for The most efficient way to internationalize your web app
Rakesh Potnuru
Rakesh Potnuru

Posted on • Originally published at blog.itsrakesh.co

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.
<script src="https://unpkg.com/@tolgee/core/dist/tolgee.umd.js"></script>
<script src="https://unpkg.com/@tolgee/ui/dist/tolgee-ui.umd.js"></script>
<script src="index.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • Open the index.js file and paste the following code, replacing YOUR API KEY with your API key, and then save the modifications.
// index.js
const { Tolgee, IcuFormatter } = window["@tolgee/core"];
const tg = Tolgee.use(IcuFormatter).init({
  apiUrl: "https://app.tolgee.io",

  // ############################################################
  // ## you should never leak your API key                     ##
  // ## remove it in for production publicly accessible site   ##
  // ############################################################
  apiKey: "YOUR API KEY",

  // in production mode this is where your
  // exported translations are loaded from
  filesUrlPrefix: "/i18n/",
  defaultLanguage: "en",
  inputPrefix: "{{",
  inputSuffix: "}}",
  watch: true,
  ui: window["@tolgee/ui"].UI,
});
tg.run();
Enter fullscreen mode Exit fullscreen mode

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


Did you find this helpful? Follow for more 🎉.

Top comments (3)

Collapse
 
developeratul profile image
Minhazur Rahman Ratul

Hey, Nice article! 🚀
I am using this in my project too but for some reason, the translations are working on my development only but not in production. I see the raw key names in production, not the values/translations. Any idea why? I am using Vite + React.

Collapse
 
itsrakesh profile image
Rakesh Potnuru

Have you added API key in env variables in your hosting provider? Try asking them in their slack - join.slack.com/t/tolgeecommunity/s...

Collapse
 
developeratul profile image
Minhazur Rahman Ratul

Yes, everything is set up properly.

I found the solution. In production, they don't recommend fetching them through the API but statically. So I had to export the translations and add them as static data.