How internationalization (i18n) works in API Manager React Apps

Libraries in used:

• react-intl i18n library for managing locales
• extract-react-intl-messages generating locale files
• babel-plugin-react-intl-auto Generate react-intl IDs and inject them during the build process to <FormattedMessage /> component

How to generate locale files

Run

npm run i18n

to generate default locale (en.json & fr.json) files. We have given en as the default language and defaultMessages are in the English language. The above command will generate a fr.json file with all the IDs , But without any values against them.

You could just rename it to any locale code you wish (i:e es.json, ja.json) and fill the relevant translated text in there.

Production build

npm run build:prod

will regenerate the locale files before the webpack bundling. Since we have configured to run a production build in mvn install process, Every maven build will regenerate the locale files.

How to add i18n support in code

• Add internationalization support out side the render() method

Alert.error(intl.formatMessage({
                defaultMessage: 'Unsupported File Type.'})
           );

.
.
.
export default injectIntl(APIDefinition);

• Add i18n support using component.

import { FormattedMessage } from 'react-intl';

.
.
.

    <Typography variant='display1'>
        <FormattedMessage defaultMessage='APIs - Create New API' />
    </Typography>

Note!

Do Not Update the locale files (i:e en.json) manually. Files under the

/features/apimgt/org.wso2.carbon.apimgt.publisher.feature/src/main/resources/publisher-new/site/public/locales

directory are most probably auto-generated. We need to address the local extension problem here.