# #171 Internationalisation (i18n) basics. Translate your app!

- URL: https://superails.com/posts/ruby-on-rails-171-internationalisation-i18n-basics-translate-your-app
- Published: 2024-06-10
- Duration: 15:09
- Access: free
- Topics: i18n, translation, internationalization
- Playlists: i18n (internationalization)

In this episode we make our app available in different languages.

There are different strategies to set the current language.

Setting the language in the URL is an easy and RESTful approach.

Let's implement it!

Episode source code (premium subscribers only): https://github.com/yshmarov/superails/pull/251/commits/da896aa42667b11b044e2899b2cbe69a3c2f5023
Based on this blogpost: https://blog.corsego.com/i18n-select-locale

## Transcript

Hello, friends. In this episode, we are going to add translations to Ruben Rails application. Now, the approach of adding translations into an application is called internationalization or I 18 n because there are 18 letters between INN and, uh, we are going to actually do it on super rail.com. So I'm going to add support for Spanish language, and it's going to look more or less like this. So here I go to the root URL, and it is English by default. And, uh, I have different flags. I can click on the Spanish flag and I will send the application in Spanish. And you see I also have slash es in the URL, so I'm sending the language in the URL and if I navigate to posts or, uh, yeah, playlists or to tags, uh, we still have this, uh, slash es or slash uh, en N in the URL. So we're going to set the language based on the URL programs and why not, uh, on current user, why not in session? Why not in cookies? Actually, the rails, uh, guides have nice answer for this. So, um, should be transparent as a part of the URL. You will not break people's, uh, assumption if you send it to a friend and they should see the same content as you in the same language as you. So, um, we are going to try to, uh, do translations this way, but usually, most often if an application requires, uh, a user to log into use, a user would, uh, set his language on his own. But for the sake of this example, we're going to set the language in the URL. Let's see how we can do it. So, uh, first of all, I will undo all these, uh, changes. I don't need them. And, uh, let's, uh, go back to our application. I will also restart the server. So yeah, here's the normal un translated untouched version of the application. And, uh, first of all, I'm going to see, uh, what is the default language of the application. I will start the rails server. Let me make the screen bigger. Rail c it n locale. It is EN default locale is also EN. And available locales is a list of, uh, all, uh, languages that we can have. So how can they add translations? First of all, I have this London page. I have this, uh, title and this subtitle. Let's navigate to this, uh, page. Let's open London page. It is, uh, inside the static controller. Here it is the landing page. And I have a title and subtitle, so let's slate them. I, uh, have already an en end ML file where I have lots of translations, but I did not add translations for, uh, these two lines. So I'm going to add them. Uh, I see I'm in the study controller and landing page action. So in the Ian VML file, I'm going to find a shared controller. Uh, not this one, the controllers would be, oh, yeah, it's not shared. It's static. The name of the controller, it's, uh, the root, uh, controls are in the root after the, uh, language namespace. So we have the static controller, and I will add the action landing page. Inside the landing page action. I'm going to add a title. I will copy with this, uh, text, and I will add a subtitle. And in the subtitle, I will copay this text. Let's save the changes. And yeah, now it is empty because, uh, well, it, I've just made empty strengths here. So let's find these, uh, translations. I will, uh, do I 18 NT, uh, static landing page title. Let's save it, folks. Yes, it works. And it'll also work if we drop the 18 N and just lift T. And it'll also work if we just leave dot title. So this is called Lazy Translation Loading because it, uh, by default tries to find inside the static controller landing page, uh, name. So the first level is static, second level is landing page. And third level that they're is dot title. And we can do the same with subtitle. Uh, let me cope with this. So here we'll have, uh, dot subtitle. Let's just make it, uh, for the sake of example different. So here we have title and subtitle. And now let's translate this to Spanish. So we are going to add a new local, uh, e ml. I'm, uh, not going to copy everything. I will just copy with this. I will say Es and here will have static title. Let's translate the title. Let's look at Google Translate Now. Uh, same with subtitle. Okay. And, uh, let's go back to our application. So what if we want to see the application in the, uh, Spanish language? What if you want to see this translations? To do so, we can go to our application controller and set the default locale. So before action, uh, set locale. daf set locale. Let's make it private. Uh, it n locale equals es. Let's refresh the page. Uh, we got this translation missing, uh, because in our development, rb, I set config item and raise on missing translations. So, uh, I'm going to disable this ol because, uh, I've just added a new translation. I didn't add all the keys for it, and I will restart the server. Okay? Uh, and here, actually you see, I see the application in Spanish because, uh, uh, in application controller, I set locale equals ES. Again, I will make it EN. And, uh, I see the English version of this two strings. So looks good. But, uh, what you want to let the user, uh, slide the language and what you want to slide the language based on the URL. So, um, actually the rails guides have, uh, a nice example of this. Let's find it. So first here it is setting in the locale from your L para. So first of all, I'm going to add this to the application controller default, URL options, and they're going to append the locale equals at and n locale to all our URLs. Let's, uh, refresh the page. Let's visit the playlists, for example. And you see we have, uh, question mark locale equals em. So we have the, uh, current, current locale appended to all the URLs. Uh, let's make it ESL refresh. I'll go to another URL, and, uh, it should be local equals es, but it doesn't look good. We don't want to, uh, set it in, uh, this format in the query programs. I want to have it, uh, something like, uh, uh, slash n or slash es, uh, slash post. So to do this, I'm going to go, uh, back here and we will add scopes to our roots. So the scope is going to be locale. Let's go to our roots and final. Now let's translate, uh, just the playlists and tags and, uh, yeah, and landing page. I will also add here. So scope locale, uh, yeah, let's say EN and the ES landing page playlists and text. Let's, uh, uh, go back to our application and refresh the page. Um, it doesn't work for posts because we didn't add the post to this scope, but, uh, if you go to playlists, we see slash es slash playlists slash es slash tags and slashes. Just go into the landing page. If I make it slash uh, ENI still have the Spanish version. And why it? So, because, uh, we have hard coded our language into application controller. Uh, so let's, uh, make it dynamic. It'll have said locale, it n locale equals rams locale or it n default locale. So we're going to find the local from the PRMs from here or from the, uh, fewer PREMs like fashion local equals es. Uh, or they're going to use the default language that is English by default. So, uh, let's refresh, uh, go to the land page. We have slashes. Let's make it slash em. And you see, voila. We managed to translate the application by updating our URL programs. Let's go again to slashes. And we said the version of the application in Spanish looks good. Let's add a language picker here so that the user can slide the language without, uh, updating the URL. Um, let's go to our npo. And here I will have, uh, equals link to, uh, EN, uh, root path locale equals EM, and same with Spanish, e, s, and Es. Okay, here are two links. So I click on this one. I see the application in English. I navigate anywhere, and I still have it in the URL paras. Let's go back here. And I click here. I have the application in Spanish. Let's, uh, also highlight the link to the current language. So to do this, I will go another, the class clause, so will be, uh, if locale or if, uh, EN equals it, n locale, uh, then we'll have, uh, border bottom. Uh, otherwise we are going to have no clause. So if the local is em, then we have it highlighted. And let's do something similar for this other Spanish local. Yeah, and here it should be Es. So let's click on Es. And everywhere we visit inside the application, we see that the Spanish language is selected. Now this code looks not very nice. Let's, uh, what if we have like 10 languages? We don't want to hot code this for each language. So they're going to, uh, do an enumeration and they're going to enumerate by the available locals. So let's go to application rb. And actually it is nice to set config 18 n default locale equals EN. And we'll also set, uh, uh, yeah, it's not 18, but 18 n. We'll also set available locales to be English and Spanish. Now, after this change, I need to restart the server. And let's have a look at our available locals now. So previously we had a list of all these languages when running 18 L available locals, and now, which have only English and Spanish looks good. So let's go back to our N bar. And here I will have item N available. Locales each do locale. And, and instead of this links, I will have the locale, uh, root path to locale equals locale, and if locale. So this way we don't have to type it for each language. Let's see if it works. Refreshing. And yeah, it works just as before. Now, instead of the language names, we can also display the flags. This would be more beautiful. So to do this, we can go to our application helper and add helper, something like that, locale to flag locale, let's say locales equals uh, uh, um, and we'll have the yeah, US flag. And the es, let's have the Spanish flag. And let's have locales local to sim. So this way they're going to find the, the flag based on the, uh, sim, E-N-O-E-S and let's display it here in the nal. So we'll have locale to flag and locale and vola. We pass the flags. Looks good. Now let's go to our playlist, for example, I will change the locale and it directs me to the root path. So this is not really nice to direct back to the previous page. Instead of root path, I will say UL four, and it's going to be the UL to the current page. So now I'm on playlists, I changed language to English and it works. I change to Spanish. And you see I'm still on the same page, but I changed the, your L pres from EN to E Es. So yeah, it works. And uh, again, here I'm on the playlist page. I don't have the title and subtitle in Spanish, but if I go to playlist index, I see I already have the key for title and subtitle. So going to es vml, I can say playlists, um, index, yeah, something like this. Let's just go with the flow. I refresh, and here I have the translations in Spanish or some kind of things that resemble the translations. So you see I have the playlist in English and in Spanish. And that's basically it. This is how you can, uh, set translations in, uh, your, uh, rules. So inside the roots. And the cool thing is that if you share the URL, the person will to whom you share will see the application is in the same language as you share the URL. So it kind of makes sense. Now again, uh, to use this approach effectively, you would want to, uh, namespace all the translatable parts of your application under this, uh, scope. But, Uh, this is the only thing you do. You just namespace everything inside the scope and everything will just work. So yeah, this is how you can do translations, uh, based on, uh, send the locale from your L brands. So thanks being with me and see you in the next one.