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

ID naming convention

If adding i18n element in publisher, Prefix the react-intl id with the path to the source file from

<APIM_PUBLISHER_ROOT>/source/src/app/components/

replace the / with ..

For example

If you are adding a <FormattedMessage /> to below file.

<APIM_PUBLISHER_ROOT>/source/src/app/components/Apis/Create/Components/APICreateTopMenu.jsx

_{<APIM_PUBLISHER_ROOT> is /features/apimgt/org.wso2.carbon.apimgt.publisher.feature/src/main/resources/publisher-new/}

use the id as

<FormattedMessage 
        id='Apis.Create.Components.APICreateTopMenu.click.to.create.api'
        defaultMessage='Click to create API' />

Add internationalization support outside 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.