Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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
Community showcase
Published in Apps & Integrations

Send an Email or Publish to Confluence - What should you do with your release notes?

Background When you hear the words ‘Release notes’, almost always you think of an unsolicited email from a software vendor. But I am here to tell you that from our data, sending release notes via E...

125 views 1 2
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you