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
4,364,436
Community Members
 
Community Events
168
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 messages.properties 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 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:

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.

0 comments

Comment

Log in or Sign up to comment
TAGS

Atlassian Community Events