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 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 files. We need to address the local extension problem here.