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.</ br>
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.
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.
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
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: 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: 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/application.rb. The middleware generates translation files on the frontend.
rails generate i18n:js:config, which will generate
This is my configuration added to
fileis 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.
You should run this every time you have new translations in the yml files.
This will generate translation files to your chosen paths.
Add this to a react file
import i18n from 'i18n-js'
Also remember to import your generated translation files.
import en from '../../i18n/en' import ja from '../../i18n/ja'
To set default locale and locale on the backend, I added this in
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
Finally, add we can access your Rails translations from React like so.
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.