ScaffoldHub - v2
  • Introduction
  • Modeling
    • Two-way Relationships
  • Setup
    • Backend
    • Frontend
    • File Storage
    • Emails with SendGrid
    • Payments with Stripe
  • Debugging
  • Deployment
    • Database
      • SQL
      • MongoDB
    • Backend
      • Google Cloud - App Engine
      • Google Cloud - Run
      • Under construction...
    • Frontend
      • Firebase Hosting
      • Heroku w/ Subdomains
      • Under construction...
  • Features
    • Projects
    • Preview
    • Tenants
      • Single-Tenant
      • Multi-Tenant
      • Multi-Tenant (w/ subdomains)
    • Payments
    • Security
    • Authentication
      • Sign-in and Sign-up
      • Invitation
      • Password Reset
      • Password Change
      • Email Verification
    • Audit Logs
    • Settings
    • Internationalization (I18n)
    • Entity
      • Form
      • Filter and List
      • Export
      • Import
    • API Documentation
  • Architecture
    • Security
    • File Storage
    • Internationalization (I18n)
    • Payments
    • Typescript Support
    • Rate limiting
    • Technologies Versions
    • Under construction...
  • Recipes
    • Testing the API with Postman
    • Enterprise sign-in with WorkOS
    • Under construction...
  • Support
  • Changelog
    • Documentation
    • Scaffolds
  • Custom Development
  • Legacy Scaffolds
  • Go to ScaffoldHub
Powered by GitBook
On this page
  • Frontend
  • Configuration
  • Usage
  • Backend
  • Configuration
  • Usage

Was this helpful?

  1. Architecture

Internationalization (I18n)

PreviousFile StorageNextPayments

Last updated 4 years ago

Was this helpful?

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.

  • 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

React Bootstrap and React Material UI

Vue Element UI

Angular Material

Usage

Typescript and JSX Files (React)

On typescript and JSX files you can use the dictionary by importing this helper function:

import { i18n } from 'src/i18n';

The helper function accepts a key and arguments.

export function i18n(key, ...args) {
  if (!getLanguage()) {
    return key;
  }

  const message = _get(getLanguage().dictionary, key);

  if (!message) {
    return key;
  }

  return format(message, args);
}

For example, if we call this key, passing two arguments:

just: {
    an: {
        example: 'with the keys {0} and {1}'
    }
}
i18n('just.an.example', 'A', 'B')

The result will be:

with the keys A and B

JSX files can also use the i18nHtml function, which allows you to use HTML on the dictionary.

message: `Please confirm your email at <strong>{0}</strong> to continue.`,
import { i18nHtml } from 'src/i18n';
<h3>
    {i18nHtml('auth.emailUnverified.message', email)}
</h3>

Angular Templates

Angular templates have this <app-i18n> with the key property to handle the internationalization.

<app-i18n key="user.title"></app-i18n>

Vue Templates

Vue templates have this <app-i18n> with the code property to handle the internationalization.

<app-i18n code="common.search"></app-i18n>

Backend

The backend receives the current language via the accept-language parameter.

req.language = req.headers['accept-language'] || 'en';

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.

import { i18n, i18nExists } from '../i18n';

/**
 * Error with code 400
 */
export default class Error400 extends Error {
  code: Number;

  constructor(language?, messageCode?, ...args) {
    let message;

    if (messageCode && i18nExists(language, messageCode)) {
      message = i18n(language, messageCode, ...args);
    }

    message =
      message ||
      i18n(language, 'errors.validation.message');

    super(message);
    this.code = 400;
  }
}

Error400 usage:

throw new Error400(
  options.language,
  'auth.emailAddressVerificationEmail.signedInAsWrongUser',
  user.email,
  currentUser.email,
);

flag: The path to the flag that is displayed on the sign-in page. Download more flags at .

antd: Path to the language provider: antd/lib/locale-provider/<locale-id>.

moment: Path to the language file: moment/locale/<locale-id>.

dateFns: Path to the locale: date-fns/locale/<locale-id>.

elementUI: The path to the locale file: element-ui/lib/locale/lang/<locale-id>.

moment: Path to the language file: moment/locale/<locale-id>.

materialLocale: The locale code.

owlDateTimeLocale: The date-time locale code.

https://github.com/gosquared/flags/tree/master/flags/flags/flat
Ant Design
Moment
DateFns
Element UI
Moment
Material
owl
Lazy initialization