How do I share translations between a .NET application and a react application?

Question

I currently have two applications where one is a landing page (built in react) and another is a web page that lets users explore data (Written in ASP.NET 4.7). I'm currently using resx files to handle translations for the .NET application and I'm using the intl npm package for translations for the react app. I'd like to have all my translations in one place since both projects share a lot of the same translations. Are there any good patterns to accomplish this?

My first idea is to have everything contained in the resx files and send string IDs over the api to the landing page. The landing page would then insert the stringID and replace the text with the translation. I don't know if these requests would be based on if the page loads or one request that sends all the strings at once.

Answer 1

The trick here is deciding where the single source of truth for translations should live. The .NET framework has very robust internationalization features. My intuition is to use the .resx files as the source of truth for your translations. Create an HTTP endpoint that reads the resx files and returns the translations in the format your front end expects, probably in the form of JSON, something like GET /localization/lang/en (think LocalizationController.Lang(string id) in .NET Core MVC terms).

Then it's just a simple require('/localization/lang/en') in JavaScript for English, and require('/localization/lang/es') for Spanish, etc. This should allow you to use an internationalization framework on the frontend. Judging by your question, you already have an NPM package that does this. You just need your HTTP endpoint to transform the .resx data into the JSON/JavaScript format your NPM package requires.