We want to have our backoffice for the main site as a multilingual solution for our users. We have already decided to use React + Redux for it, as it makes a lot of sense to use the already deployed API for several functionalities such as authorization and data fetching ..
I used a custom approach in the past, but it's so complex and maybe we are missing a best practices method here. The main site is already in 4 languages, and soon to grow into others.
I've taken a look at some of the ongoing libs, such as React-intl (https://github.com/yahoo/react-intl) and Airbnb Polyglot (http://airbnb.io/polyglot.js/)
What would be the best approach/lib/solution for building a multilingual site in React? (just on front-end, not an isomorphic app thou)
When I said that we used something in the past, I was referring to this L10ns automation for translation strings. It's good enough for a medium project, but maybe gets too bloated when you have a large number of strings or in several languages ..
L10ns works by scanning your files, collecting the string ids of your texts, and coming up with a list of them to be translated into different languages. With some external help like poEditor, or it's built-in web interface, you can keep up with translations for your site.
Any other input guys??
I've used react-intl; it uses the child context to pass the translations to react-intl specific react elements. I found this approach somewhat limiting, and a bit of a pain since you need to include the specific elements like
<FormattedNumber />wherever you want to put a translation. Looking at polyglot it seems simpler and more flexible. What I'd do is concatenate polyglot (make sure it's exposed as a global variable) and your translations as a separate script, and compile a separate one for each locale with the proper translations embedded in it. You can compile multiple versions of the same script using an environment variable to specify which translation to require for each build; like in this example for webpack. Then on the server, you'd check the locale in the request headers and add the appropriate script tag to the page, like:<script type="text/javascript" src="translations-{{locale}}.js"></script> <script type="text/javascript" src="bundle.js"></script>When your bundle loads then you'll have polyglot as a global and you can use it wherever you need to in your components. This is similar to approaches I've taken in the past using globalize and browserify, and it worked out well.