DEV Community

Cover image for Internationalization with Rails and i18n-js
Kazumi Karbowski
Kazumi Karbowski

Posted on • Updated on

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"


Enter fullscreen mode Exit fullscreen mode

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]


Enter fullscreen mode Exit fullscreen mode

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



I18n::JS.filtered_translations.keys
=> [:en, :ja]


Enter fullscreen mode Exit fullscreen mode

Now add English strings in en.yml.



en:
  hello: "Hello world"


Enter fullscreen mode Exit fullscreen mode

You can check to see if it's working in the rails console like so:



I18n.t 'hello'
=> "Hello world"


Enter fullscreen mode Exit fullscreen mode

Now let's add Japanese translation in ja.yml.



ja:
  hello: "こんにちは 世界"


Enter fullscreen mode Exit fullscreen mode

This is how we can access the translation in a slim file.



h1 = t('hello')


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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.*'


Enter fullscreen mode Exit fullscreen mode

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'


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

And add this in application.rb



config.i18n.default_locale = :ja



Enter fullscreen mode Exit fullscreen mode

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"


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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

English hello world

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

Japanese hello world

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!

Top comments (1)

Collapse
 
cristiano profile image
cristiano

This is a great article and helped me a lot! I did install this gem in a transition point between versions so got a bit confused with the documentation available in the repo so please keep that in mind as there are a few differences between this syntax and the new version when using the package in JavaScript files.