Help needed - easiest way to translate an SPA into multiple languages?

Hey @jonnymatthews. What is your tech stack for the SPA? We are currently evaluating i18next at $dayjob - it seems to be the industry standard for internationalizing a JavaScript codebase. Since our SPA is a React app we are specifically evaluating react-i18next, which is a thin wrapper around i18next adding some React-specific integration points.

The way this (and almost all i18n libraries) work is that you replace all the English text in your codebase with a keyword instead, so e.g. let msg = "Hello, world" becomes let msg = t("HELLO_WORLD"). You also need to provide a translations file (this is where you beta tester volunteers come in!) which looks something like:

{
  "en": {
    "HELLO_WORLD": "Hello, world!"
  },
  "es": {
    "HELLO_WORLD": "¡Hola, mundo!"
  }
}

It's a going to be a lot work no matter what specific service you choose - AFAIK there's no plug-and-play solution since your engineers are going to need to replace all the English messages in your codebase no matter what.

Hope this helped, happy to chat further about this if you want.

Are you using any kind of framework? As many have translation support built in. I've used https://lokalise.co/ in the past, though their might be better ones, it's been a while. But basically how it tends to work is you have a reference identifier that is replaced from an array in the specific language. I.e. you might have something like __('intro_text') then an en.json and a de.json (or any format really) each of which will have the line of text that corresponds to the 'intro_text' key, the __() function in this example just replaces intro_text with whatever language the user has selected, you would also fallback to english if the key was missing. The above site allows you to create the keys and people can provide translations for it, then you can export in multiple formats. I used it with laravel and used a console command to automatically grab the latest versions using their API.