Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Deleted user
Level
0 / 0 points
Next:
badges earned

Your Points Tracker
Challenges
Leaderboard
  • Global
  • Feed

Badge for your thoughts?

You're enrolled in our new beta rewards program. Join our group to get the inside scoop and share your feedback.

Join group
Recognition
Give the gift of kudos
You have 0 kudos available to give
Who do you want to recognize?
Why do you want to recognize them?
Kudos
Great job appreciating your peers!
Check back soon to give more kudos.

Past Kudos Given
No kudos given
You haven't given any kudos yet. Share the love above and you'll see it here.

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 Marketplace Apps & Integrations

New Cloud Apps Roundup - April 2021

Atlassian's marketplace partners have had a very productive start to 2021! Since our last roundup, our developer community has added over 160 new cloud apps to the Atlassian Marketplace to help you...

310 views 3 20
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