Help getting Ruby on Rails configured with i18n-js

[marky1124]

Hi,

I'm looking for help getting setup properly.

I have a Ruby on Rails application. It has some client side JavaScript code. I want to add some translation strings to that code. I'd like the translations to be included in the application.js bundle that is precompiled and provided to the browser when the application loads, and then reference it from other JS client side code.

I've tried to follow the i18n-js and i18n repo readme files, but embarrassingly they just don't hold my hand enough to get it all straight. I am in the process of preparing a PR to offer some changes to the readme's that would have helped me, and hopefully others. I won't push that up until I have it all working.

Here's an outline of my understanding of the steps I need to perform

• Install the i18n-js ruby gem. Easy one to start. I'm OK with that.
• Export a subset of my Ruby on Rails locale files to a form that will be used by JavaScript. I can use the command line i18n export to create .json files, and store them in app/javascript/translations. I'd prefer to find a way to export them as .js files that can be embedded in the application.js bundle that Rails will provide to the client browser.
• Ensure that Ruby on Rails provides those translations to the browser

I've seen other suggestions about adding a controller to the Ruby on Rails app that will serve translations when requested by the client side JavaScript. I don't really want to take that approach. I only need to update translation strings on fresh application deployments. My preference is to have some way to ensure the build pipeline generates and precompiles the translation hash that will be provided in the application.js and then made available for other client side Javascript to reference.

The client side code will be served a locale attribute in the document body so the client side JavaScript knows which language to render.

I've seen mention of rake i18n:js:export output_file=public/javascripts/translations.js but I don't have that rake task despite installing the i18n-js gem v4.

I'm not sure if I'm also supposed to include the i18n-js npm module into the application.js bundle. I've tried. I did the npm install i18n-js and have the package in app/node_modules, but adding //= require i18n-js to application.js causes errors in the browser console, and the JavaScript package fails. Ultimately I'm not sure I need the i18n-js in the client side code, if I can generate a globally accessible data structure that the JavaScript client side code can reference directly then that'll be good enough for me.

Thank you for reading this far. I'd very much appreciate any help with this. I've looked for examples in github, but failed.

All the best,
Cheers,
Mark

[fnando]

So, the answer depends on which version you're using. I'm assuming you want the latest one.

There are two repos:

• https://github.com/fnando/i18n-js is the CLI and everything related to exporting translations to JSON files is done here.
• https://github.com/fnando/i18n is the JavaScript/TypeScript package that you use to interact with the translations by using the above CLI (although it is optional to use the CLI, I highly recommend it).

I'd prefer to find a way to export them as .js files that can be embedded in the application.js bundle that Rails will provide to the client browser.

You can do that by using the export_files plugin. The readme even has an example showing how to export a TypeScript file (just adapt that to be JavaScript instead).

Ensure that Ruby on Rails provides those translations to the browser

If you want to use translations on your views, the traditional approach of using <%= t("scope") %> still applies here; i18n-js is meant to be used as a complement on the client-side, for cases where JavaScript needs to use translations and/or localization.

My preference is to have some way to ensure the build pipeline generates and precompiles the translation hash that will be provided in the application.js and then made available for other client side Javascript to reference.

Just make sure you call i18n export before the step you have that bundles your JavaScript on your build pipeline.

I've seen mention of rake i18n:js:export output_file=public/javascripts/translations.js but I don't have that rake task despite installing the i18n-js gem v4.

Rake tasks are a thing from previous versions and have been superseded by the CLI.

I'm not sure if I'm also supposed to include the i18n-js npm module into the application.js bundle

You are. The i18n-js gem doesn't bundle JavaScript code anymore, so you need to install the NPM package and import that from your code.

[marky1124]

Thank you very much fnando for your quick response. With your helpful explanations plus much experimenting I have reached my goal. I did not end up using the i18n-js npm package, but instead templated my own I18n.t() function into a file called app/assets/javascripts/i18n.js and included that in my app/assets/javascripts/application.js file. This means that any JavaScript code can now call I18n.t(key) to get a translation. That approach has been useful for me as I've been able to include custom business logic and also avoid creating any new npm package dependencies, as the application currently only has one.

This is my i18n.yml file

---
translations:
  - file: app/assets/javascripts/i18n.js
    patterns:
      - "*.js"

export_files:
  enabled: true
  files:
    - template: app/assets/javascripts/i18n.erb
      output: "app/assets/javascripts/i18n.js"
      # This export plugin overwrites the json output from line 3

I only want output from the export_files plugin, not the json produced by the main i18n export command. I found by specifying the same name twice the export plugin over wrote the json output. I'd prefer to find a way to just specify the export_files output file and skip the json file rendering. For instance at the moment my solution would break if the i18n export command chose to run the export plugin first and then overwrote that with the json output. Is that possible with the current config?

Thanks again.

[marky1124]

Hi CarriSisomphouqo
Thank you for your reply.
I don't see the command you mention in your reply. I see 'you can use the following command: ' and then 'This will export...'.
The same issue appears where you are saying '...adding the following line to your config/initializers/assets.rb', file.
I'm happy now that I have my i18n.js file written out by i18n export and it's included in the application.js file, and so included in the application.js sent to the browser.
fnando did mention that v4 is different from v3. v4 doesn't have any rake tasks.
Cheers,
Mark