Not long ago, the platform and its modules started supporting 10 languages — from English to Chinese — and there are plans to increase that number. This update requires developers to keep all localization files up to date when developing new features.
One way to handle this is to manually edit each file and paste every new phrase into an online translator 9 times (hopefully, the developer can write text without a translator at least once). Another option is to upload a ready-made localization JSON into ChatGPT with a request to translate the data while preserving its structure. ChatGPT handles this very well, significantly speeding up the process. However, the need to open all 10 localization files and manually edit each one still remains.
To avoid this routine, the development team implemented a script in the UI project vc-frontend that automatically translates localization files into all platform-supported languages. You can make the initial changes in the file of any language, and the script will automatically propagate the updates to all other files that lack them. It works based on set union logic and translates all texts according to the appropriate locale.
To use it, simply download the vc-frontend source code and perform the initial setup as described in the project documentation. Note that the translation is done using Google Gemini AI, so you’ll need an APP_GEMINI_API_KEY, which can be generated here: https://aistudio.google.com/app/apikey
In the root of the vc-frontend project, find the package.json file, open it in your favorite text editor, and modify the fix-locales command. Here’s the original:
"fix-locales": "yarn precheck && vite-node scripts/fix-missing-locales.ts locales client-app/ui-kit/locales client-app/modules/**/locales"
Specify APP_GEMINI_API_KEY like this:
"fix-locales": "yarn precheck && APP_GEMINI_API_KEY=<your key> && vite-node scripts/fix-missing-locales.ts locales client-app/ui-kit/locales client-app/modules/**/locales"
After that, run the following command in the console:
yarn fix-locales
All localization files in vc-frontend will then be updated to reflect any changes made.
But what if you’re not working with the UI? We still have the platform itself and a wide variety of modules — both official and third-party. It’s all very simple. To make the magic work for other modules, just specify the absolute path to your localization folder in the module. For example:
"fix-locales": "yarn precheck && APP_GEMINI_API_KEY=<your key> && vite-node scripts/fix-missing-locales.ts locales D:/vc-module-customer/src/VirtoCommerce.CustomerModule.Web/Localizations"
After running the script, the localization files in the specified directory will be updated — just like with the vc-frontend files.
Don’t forget to revert the settings when you need to work with frontend localization files again. For convenience, it’s better not to touch the original fix-locales command. Instead, create a new one next to it, like fix-outer-locales (name it whatever you want), and use it for translating localization files in other modules.
There are already ideas to improve and extract this functionality into a standalone project. In the meantime, we hope this life hack helps many developers avoid the tedious and monotonous work of translating files when the time comes to localize for 10 languages again.