Internationalization (I18n)
Files for internationalization are located at:
frontend/src/i18n
backend/src/i18n
Frontend
Configuration
The first thing you need to do when adding a new language to ScaffoldHub is to create a dictionary file.
You may want to copy the frontend/src/i18n/en.ts
file and translate each value.
Then you must declare this file on thefrontend/src/i18n/index.ts
file.
The index object will need:
id: The locale code.
label: The label that is displayed on the i18n select box.
flag: The path to the flag that is displayed on the sign-in page. Download more flags at https://github.com/gosquared/flags/tree/master/flags/flags/flat.
dictionary: The dictionary file content. It is lazy-loaded, that's why on the image it starts as null.
Each frontend has its specific framework related i18n files.
React Ant Design
antd: Path to the Ant Design language provider: antd/lib/locale-provider/<locale-id>.
moment: Path to the Moment language file: moment/locale/<locale-id>.
React Bootstrap and React Material UI
dateFns: Path to the DateFns locale: date-fns/locale/<locale-id>.
Vue Element UI
elementUI: The path to the Element UI locale file: element-ui/lib/locale/lang/<locale-id>.
moment: Path to the Moment language file: moment/locale/<locale-id>.
Angular Material
Usage
Typescript and JSX Files (React)
On typescript and JSX files you can use the dictionary by importing this helper function:
The helper function accepts a key and arguments.
For example, if we call this key, passing two arguments:
The result will be:
JSX files can also use the i18nHtml function, which allows you to use HTML on the dictionary.
Angular Templates
Angular templates have this <app-i18n> with the key property to handle the internationalization.
Vue Templates
Vue templates have this <app-i18n> with the code property to handle the internationalization.
Backend
The backend receives the current language via the accept-language
parameter.
Configuration
The backend configuration is very simple, you just have to declare the dictionary file.
Usage
The usage is the same as the typescript from the frontend.
Errors
The internationalization for the backend is most used on error handling, and it uses the i18n methods on its constructor.
Errors constructors receive the language, key, and arguments.
Error400 usage:
Last updated