Internationalization (I18n)

Search…
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.
Lazy initialization
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
materialLocale: The Material locale code. 
owlDateTimeLocale: The owl date-time locale code.
Usage
Typescript and JSX Files (React)
On typescript and JSX files you can use the dictionary by importing this helper function:
1
import { i18n } from 'src/i18n';
Copied!
The helper function accepts a key and arguments.
1
export function i18n(key, ...args) {
2
  if (!getLanguage()) {
3
    return key;
4
  }
5
​
6
  const message = _get(getLanguage().dictionary, key);
7
​
8
  if (!message) {
9
    return key;
10
  }
11
​
12
  return format(message, args);
13
}
Copied!
For example, if we call this key, passing two arguments:
1
just: {
2
    an: {
3
        example: 'with the keys {0} and {1}'
4
    }
5
}
Copied!
1
i18n('just.an.example', 'A', 'B')
Copied!
The result will be:
1
with the keys A and B
Copied!
JSX files can also use the i18nHtml function, which allows you to use HTML on the dictionary.
1
message: `Please confirm your email at <strong>{0}</strong> to continue.`,
Copied!
1
import { i18nHtml } from 'src/i18n';
Copied!
1
<h3>
2
    {i18nHtml('auth.emailUnverified.message', email)}
3
</h3>
Copied!
Angular Templates
 Angular templates have this <app-i18n> with the key property to handle the internationalization.
1
<app-i18n key="user.title"></app-i18n>
Copied!
Vue Templates
Vue templates have this <app-i18n> with the code property to handle the internationalization.
1
<app-i18n code="common.search"></app-i18n>
Copied!
Backend
The backend receives the current language via the accept-language parameter.
1
req.language = req.headers['accept-language'] || 'en';
Copied!
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.
1
import { i18n, i18nExists } from '../i18n';
2
​
3
/**
4
 * Error with code 400
5
 */
6
export default class Error400 extends Error {
7
  code: Number;
8
​
9
  constructor(language?, messageCode?, ...args) {
10
    let message;
11
​
12
    if (messageCode && i18nExists(language, messageCode)) {
13
      message = i18n(language, messageCode, ...args);
14
    }
15
​
16
    message =
17
      message ||
18
      i18n(language, 'errors.validation.message');
19
​
20
    super(message);
21
    this.code = 400;
22
  }
23
}
Copied!
Error400 usage:
1
throw new Error400(
2
  options.language,
3
  'auth.emailAddressVerificationEmail.signedInAsWrongUser',
4
  user.email,
5
  currentUser.email,
6
);
Copied!
File Storage
Payments
Last modified 1yr ago
Copy link
Contents