Jira Cloud app: i18n support

[#1]

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 backend/src/main/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'; 
const resources = { en: { translation: translationEN } }; 
i18n 
.use(initReactI18next) 
.init({ resources, 
        lng: "en", 
        keySeparator: false, 
        interpolation: { escapeValue: false } 
     }); 

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.