Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Jira Cloud app: i18n support

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 in the backend/src/main/resources folder with the following content:

greeting=Hello! Welcome to our app!

Screenshot 2021-03-19 at 09.30.14.png

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:

Screenshot 2021-03-19 at 09.50.22.png

We can see our message from the 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 } };
.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() {
<Button appearance="primary"> {i18n.t('mybutton')} </Button> ,

window.onload = startRender;

We added two lines:

import i18n from './i18n'

Let's run our application:

Screenshot 2021-03-19 at 10.15.29.png

We can see the messages from translation.json file.

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



Log in or Sign up to comment
AUG Leaders

Atlassian Community Events