Jira Cloud app: i18n

Hello! In this article I will show you how to add i18n support to a Jira cloud app. I will change the app developed in this article.

Our app consists of two parts where we can apply i18n: thymeleaf and react. We will add i18n support to both of the parts.

You can take the complete code here.

i18n support for Thymeleaf

Create a file called messages.properties in the resources folder with the following content:

greeting=Hello! Welcome to our app!

Now let’s add the following line into our src/main/resources/templates/generalconfig.html file:

<h1 th:text="#{greeting}"></h1>

Now let’s run our app:

We can see our message from the message.properties file.

i18n in React

To add i18n to React we will use i18next package.

Let’s open our frontend/package.json file and add dependencies for i18next package:

"i18next": "^19.9.2",
"react-i18next": "^11.8.10",

Then create frontend/public/locales/en/translation.json with the following content:

{
  "mybutton": "My button message"
}

Add frontend/src/i18n.js:

import i18n from "i18next";
import { initReactI18next } from "react-i18next"

import translationEN from '../public/locales/en/translation.json';

// the translations
const resources = {
  en: {
    translation: translationEN
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en",

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default i18n;

Now change frontend/src/main.js to this one:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@atlaskit/button';
import '@atlaskit/css-reset';
import '@atlaskit/reduced-ui-pack';
import i18n from './i18n'

function startRender() {
    ReactDOM.render(
        <Button appearance="primary">
            {i18n.t('mybutton')}
        </Button>
    , document.getElementById('react-container'));
}

window.onload = startRender;

We added two lines:

import i18n from './i18n'
{i18n.t('mybutton')}

Let’s run our application:

We can see the messages from translation.json file.

That is all. We used i18n in Thymeleaf and React.