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

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root


1 badge earned


Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!


Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.


Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!


Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

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