Internationalization with Rails and i18n-js

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

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.

Define available locales in config/application.rb. In my case, I'm adding support for English and Japanese.

config.i18n.available_locales = [:en, :ja]

You can check all the locales available in the Rails console.

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.

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.

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:

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

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!