Skip to main content
Version: 20.05

Locales

i18n is an area that appears to be simple but it is actually very complex. When it comes to internationalization, people will find it often involves a lot of content:

  • Front-end internationalization
  • Internationalization of server
  • Internationalized resource file management
  • How to collaborate between projects, developers and translators

Moreover, internationalization implementations are often tied to specific technology stacks. This internationalization setup is only for the React technology stack and does not involve server-side internationalization.

Front-end internationalization steps

The core steps of internationalization are as follow:

  1. Import the correct dayjs locale file.
  2. Create and import a messages file, stored as a key-value under /locales dir.
  3. Pass configs, messages and locale to App init.
Introducing dayjs local data
import 'dayjs/locale/en';
import App from '@transact-open-ux/workspaces/dist/App';
import configs from './configs/development';
import messages from './locales/en';

const root = document.getElementById('root');

export default async function init() {
if (process.env.NODE_ENV === 'development') {
const { default: fixtures } = await import('./fixtures/development');
const { default: makeServer } = await import('@transact-open-ux/workspaces/dist/Server');
// start server
makeServer({
fixtures,
});
}
// start only the cleint if production
App(root, configs, messages, 'en');
}

init();

Internally we are using dayjs library for date translations, it requires some unique local data when doing internationalization, mainly for relative time translation, such as yesterday, today, tomorrow, minutes ago, months ago and the like. That's why it is important to import the correct locale at the begining of the file.

Internationalized Resource File Management

The above document mainly discusses the steps of how to internationalize after the introduction of messages files. Next, let's talk about the management of international resource files. Currently we manage the resource file in the src/locales folder (of course, where you put it):

.
├── en.ts
├── es.ts
└── pt.ts

*.ts is our resource file, returns an object, key for our translation id, value for the specific language translation:

export default {
Home: 'Home',
All: 'All',
Apply: 'Apply',
Process: 'Process',
Helpdesk: 'Helpdesk',
...
}

Note that we currently support a single locale per JM Form. Multiple locales can be setup by deploying different forms to JM.