Internationalization with Rails and i18n-js
Tags: rails, react, i18n, howisolved
Published: 2020-10-06 22:36:00

---
title: Internationalization with Rails and i18n-js
published: true
description: 
tags: #rails #react #i18n #howisolved
cover_image: https://res.cloudinary.com/codingmamakaz/image/upload/v1602023527/hello-3791381_1280_1_jvckxf.png
---

According to Wikipedia, Internationalization (shorthand as i18n as there are exactly eighteen characters between the first “i” and the last “n”) is a process of designing a software application so that it can be adapted to various languages and regions without engineering changes.
According to the Rails Guides, The process of "internationalization" usually means to abstract all strings and other locale specific bits (such as date or currency formats) out of your application. The process of "localization" means to provide translations and localized formats for these bits.

I was working on an app built with React on Rails. Most of the pages were written in React, but some pages were written in and rendered from the Rails views. This meant that I needed to figure out a way to provide translations on both the backend and the frontend.
I searched for articles and tutorials, but I couldn’t find one that was solving the same problem I had. I found a lot of tutorials on “i18n-ing” Rails apps, and some on Rails and Javascript, but not on Rails and React.
After spending some time researching, I decided to try [rails-i18n](https://github.com/svenfuchs/rails-i18n) and [i18n-js](https://github.com/fnando/i18n-js) gems.

`rails-i18n` provides an easy-to-use and extensible framework for translating your app. `i18n-js` is a small library to generate the Rails i18n translations on the JavaScript side. It provides a middleware that auto-generates Javascript files using the yml translation files from the Rails side.

Using those gems seemed like a good way to solve the problem I had.<br />
I would like to share how I did it.

First, add the gems to your Gemfile.
```
gem "i18n-js"
gem "rails-i18n"
```

Don't forget to install gems by running
`bundle install`

If you are using webpacker, run
`npm install i18n-js`
If you are using asset pipeline, check out [this ReadMe](https://github.com/fnando/i18n-js).

Define available locales in `config/application.rb`. In my case, I'm adding support for English and Japanese. <br />
```
config.i18n.available_locales = [:en, :ja]
```

You can check all the locales available in the Rails console.<br />
```
I18n::JS.filtered_translations.keys
=> [:en, :ja]
```

Now add English strings in `en.yml`.
```
en:
  hello: "Hello world"
```
You can check to see if it's working in the rails console like so:
```
I18n.t 'hello'
=> "Hello world"
```
Now let's add Japanese translation in `ja.yml`.
```
ja:
  hello: "こんにちは 世界"
```
This is how we can access the translation in a slim file.
```
h1 = t('hello')
```

Now we got it working on the Rails side, let's move onto getting the translation on the React side.

Add a middleware by adding this line
```
config.middleware.use I18n::JS::Middleware
```
to `config/application.rb`. The middleware generates translation files on the frontend.

Run `rails generate i18n:js:config`, which will generate `config/i18n-js.yml`

This is my configuration added to  `config/i18n-js.yml`
```
translations:
- file: 'app/javascript/bundles/i18n/en.js'
  prefix: "import I18n from 'i18n-js';\n"
  pretty_print: true
  only: 'en.*'
- file: 'app/javascript/bundles/i18n/ja.js'
  prefix: "import I18n from 'i18n-js';\n"
  pretty_print: true
  only: 'ja.*'
```
`file` is specifying the path of my choice for js translation file.<br />
`prefix` is optional, but without it, I was getting "I18n is not defined" error, and I couldn’t get it to work. It will add the line at the beginning of the resultant translation file.<br />
`pretty_print` is optional as well, but I definitely recommend putting this. It adds whitespace and indentation in your output file, which makes it so much easier to read the files.

Run `rake i18n:js:export`
This will generate translation files to your chosen paths.

Add this to a react file
```
import i18n from 'i18n-js'
```

To set default locale and locale on the backend, I added this in `views/layouts/application.slim`

```
- javascript_tag do
      I18n.locale = I18n.locale
      I18n.defaultLocale = I18n.default_locale
```
And add this in `application.rb`

```
config.i18n.default_locale = :ja

```

To set them on the React side, you can add this inside the render (this set them to be in Japanese).

```
I18n.defaultLocale = "ja"
I18n.locale = "ja"
```
**ja needs to be a string like `"ja"`**


Finally, add we can access your Rails translations from React like so.
```
<h2>{I18n.t('hello')}</h2>
```
When the locale is set to English, you'll see this:

![English hello world](https://res.cloudinary.com/codingmamakaz/image/upload/v1602023343/Screen_Shot_2020-10-06_at_6.27.25_PM_oy5y05.png)

When the locale is set to Japanese, you'll see this:

![Japanese hello world](https://res.cloudinary.com/codingmamakaz/image/upload/v1602023899/Screen_Shot_2020-10-06_at_6.38.01_PM_q0qiog.png)

As you can see, some of the translation's strings might be longer, which may cause you a lot of headaches dealing with css 😱

I hope this post helps someone.
Happy i18n-ing!