DEV Community

Cover image for I easily translated my React.js applications into multiple languages. Here is how... 🤯

I easily translated my React.js applications into multiple languages. Here is how... 🤯

Jan Cizmar on September 23, 2024

Translating an App to multiple languages (localization) is tricky part of many applications. Tolgee is simplifying the localization process and sa...
Collapse
 
willjohn22 profile image
willjohn22

Great! I was looking for self-hosted alternative to Lokalise. This looks amazing, finished the tutorial in few minutes.

Collapse
 
ferguson0121 profile image
Ferguson

Yeah, the Lokalise pricing is just ridiculous.

Collapse
 
jancizmar profile image
Jan Cizmar

🤠

Collapse
 
jancizmar profile image
Jan Cizmar

Thanks! 🚀

Collapse
 
nevodavid profile image
Nevo David

Super cool, I am going to translate my app:
github.com/gitroomhq/postiz-app
with it :)

Collapse
 
jancizmar profile image
Jan Cizmar

Great! Just ask if you have any any questions! :)

Collapse
 
samcurran12 profile image
SamCurran12

Hey! Thanks for sharing this. Will go thru this tomorrow.

Collapse
 
hdeyana profile image
hdeyana

It is great tool, been used for biggest streaming platform in Indonesia, visionplus.id

Kudos team tolgee

Collapse
 
marketa_c profile image
Marketa Cizmar

that's awesome, thanks for sharing that! Excited that Tolgee is used in Indonesia

Collapse
 
jancizmar profile image
Jan Cizmar

Thanks a lot!

Collapse
 
debadyuti profile image
Deb

This is pretty cool. All the localization options are pretty expensive. Is this going to be available of Webflow or Wordpress or Framer at some point?

Collapse
 
jancizmar profile image
Jan Cizmar

Hey!
We are looking for ways how to integrate it to these. Framer is based on React, so this might be simple one. We have some ideas for Wordpress too. :) Stay tuned!

Collapse
 
zack-123 profile image
Zack

Is it also possible to use it with Vue.js?

Collapse
 
jancizmar profile image
Jan Cizmar

Hey! Yeah. Tolgee has also an integration to Vue.js. tolgee.io/integrations/vue

Collapse
 
zack-123 profile image
Zack

Awesome! I will test it on my project.

Collapse
 
david-123 profile image
David

Looks neat, thanks for sharing

Collapse
 
dawoodkarim profile image
dawoodkarim

Nice one! Localization was always kind of pain for me and Tolgee looks promising.

Collapse
 
jancizmar profile image
Jan Cizmar

Thanks a lot!

Collapse
 
steven0121 profile image
Steven

how do you prevent editing of the strings in production?

Collapse
 
jancizmar profile image
Jan Cizmar

Hey! In the production mode, you should never leak your API key and so Tolgee SDKs don't fetch translations from the REST API. Instead, you can choose from several ways, how to provide static data to the Tolgee instance.

tolgee.io/js-sdk/providing-static-...

Collapse
 
paratron profile image
Christian Engel

So, wait: this basically integrates a ton of javascript into your app just to translate it? What happens when you deploy it? How is all of this being removed upon build time or do you just ship it to the users and hide it away from them? Are localizations always loaded from the tolgee servers?

There are so many red flags here :(

Collapse
 
jancizmar profile image
Jan Cizmar

Hey! Great questions!

All the dev tools are removed when the app is built, and only the basic functionality, similar to any other i18n solution, is kept in the resulting build. Tolgee JS is modular, so you don't have to include what you don't like and write your own plugins if you wish.

We recommend against using localization data from Tolgee REST API for production builds, since it can be slow and you don't want to rely on the Tolgee servers. There are multiple ways how to serve the data to the clients. You can export the data (using the CLI or via REST API) and bundle them with production build, you can use Content Delivery, which deploys the data to Global CDN or you can host the data somewhere else and handle that yourself.

Collapse
 
paratron profile image
Christian Engel • Edited

Thanks for the clarification! It was not exactly clear that the in-place editor would not be bundled along with the application (its still not clear to me if its actually not bundled or just hidden away from the user).

Also there seems to be no documentation about how you would actually download the language files upon build, store them in your project and bake it into your app.

This gets even more complicated when you have multiple languages for your app. You should NOT write all your language strings into the JS bundle.

I suggest getting the docs crystal clere on this matter - but you are on a very good way and I wish you best of luck with your project!

Thread Thread
 
jancizmar profile image
Jan Cizmar

Hey!

its still not clear to me if its actually not bundled or just hidden away from the user

It's really not bundled. It works the same as with React.js. When you build for production. Different bundle is used. You can check the code.

But we might add this to FAQ section. :)

This gets even more complicated when you have multiple languages for your app. You should NOT write all your language strings into the JS bundle.

There are several ways how to provide the data to Tolgee JS. Different approaches are optimal for different cases. You can read more here.

Collapse
 
steven0121 profile image
Steven

we use tolgee i18n and it almost doesn't affect the bundle size.

Collapse
 
rust_will_eat_the_world profile image
Nathan Stevens

This feels like an ad tbh.

Collapse
 
zack-123 profile image
Zack

Well, yeah, but still. It's open-source project so I appreciate their effort. :)