Let us add localization to the electron tutorial app. We will look at translating both in the main and renderer process.
I tried some of the already existing npm-packages that helps with translating your app. They were good but didn’t feel 100% right to me. Some of them used .po-files, some of them were too advanced. So I decided to write a simpler one on my own. This is just a matter of taste. If you find another way that suits you better you should do it like that instead.
The localization script will store translations in .js files with a json-structure. It will use english as a fallback language, and try to use the users language by default. If no translation is found the original phrase will be sent back to be used.
1.Adding the script
Create a new folder in the project called translations. Create a new .js file and copy the contents below and save the file as i18n.js (why i18n?)
In the i18n constructor the script first checks if a language file for the current users locale exists. If it does that file is loaded. If the file does not exist the script loads the fallback language in en.js.
the __ function takes a phrase as an argument and checks if that is translated in the loadedLanguage. If it’s not it returns the phrase sent to the function.
This line takes care of loading app from either the main(mainmenu.js) or renderer(from index.html) process.
2.Adding translation files
Since i am from Sweden I will locate the tutorial app into Swedish. So I will create en.js and sv.js in the translations folder. To know what you should name your file so that the i18n script will find it and load it you can add this to main.js which will log the locale to the terminal(just add .js to it):
This is how the structure in the translation files should look. This is what en.js will look like:
And this is what my sv.js looks like:
3.Translating the menu (Main process)
As you might have guessed when reading the translation they look like menu items. So let us translate the menu that was added in the last tutorial.
Open up mainmenu.js that is located in the menu folder and add this require statement to the top of the file:
Now all we need to do is call i18n.__() for every menu item. These are what the first three looks like, here is the fully translated menu file.
What you do is add the label: attribute to the menu item, which gets the translated value from i18n__().
4.Translating navigation menu in index.js (Renderer process)
Create a new file in assets/js/ called translations.js. In this one we’ll use jquery to set the translated strings to our html-markup.
Open index.html and add i18n int the list of scripts.
In translations.js it’s plain jquery to set the text of the elements that you wish to translate:
This is just two translations that are added. You can see the full file here.
The app now looks like this when running it on an os set to Swedish language:
electron tutorial app windows - translated to swedish