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

React and Atlaskit in Atlassian Server/Data center apps Part 1

Hello!

In this article I would like to provide a solution on how to use React and Atlaskit in Atlassian Server/Data center apps.

Intro

Currently, if you develop an app for Atlassian Sever/Data center apps all you have for building UI out of the box is vm, soy, requirejs, jquery, backbone. I wrote an article on the out of the box features.

But this technology stack is outdated. I personally would like to use up to date technology stack which includes typescript and react in my Atlassian apps. Also to make my application more portable between Server/Data Center and Cloud I would like to use atlaskit library of UI elements.

I will make this tutorial for Atlassian Jira but this kind of approach can be used for other Atlassian Server/Data Center products.

To reproduced all steps in this tutorial you would need git and Atlassian SDK.

Let's start!

Install Maven archetype and create a new project

I created a Maven archetype to make it simpler to create a new project with all React and Atlaskit settings and dependencies.

If you do not want to use the Maven archetype you can clone already created project from this archetype and go to the Build and Run project part.

Clone the Maven archetype from my Bitbucket repository:

git clone https://alex1mmm@bitbucket.org/alex1mmm/jira-react-atlaskit-archetype.git --branch v1 --single-branch

Move to the jira-react-atlaskit-archetype folder and install this archetype into your local Maven repository:

cd jira-react-atlaskit-archetype
atlas-mvn install

After the Maven archetype was installed move out of the archetype's folder and create a new project based on this archetype:

cd ..
atlas-mvn archetype:generate -DarchetypeCatalog=local

You will be asked to choose the archetype you need. I have the following local Maven archetypes:

1: local -> com.cprime.jira.sil.extension:sil-extension-archetype (This is the com.cprime.jira.sil.extension:sil-extension plugin for Atlassian JIRA.)
2: local -> ru.matveev.alexey.sil.extension:sil-extension-archetype (This is the ru.matveev.alexey.sil.extension:sil-extension plugin for Atlassian JIRA.)
3: local -> ru.matveev.alexey.atlas.jira:jira-react-atlaskit-archetype-archetype (jira-react-atlaskit-archetype-archetype)

We need the ru.matveev.alexey.atlas.jira:jira-react-atlaskit-archetype-archetype archetype. In my case it is number 3 that is why I provided number 3 as the answer.

Then you will be asked to enter the groupid and artifactid for your new project. I answered the following way:

Define value for property 'groupId': react.atlaskit.tutorial
Define value for property 'artifactId': my-tutorial
Define value for property 'version' 1.0-SNAPSHOT: : 
Define value for property 'package' react.atlaskit.tutorial: : 
Confirm properties configuration:
groupId: react.atlaskit.tutorial
artifactId: my-tutorial
version: 1.0-SNAPSHOT
package: react.atlaskit.tutorial
 Y: : Y

Build and Run project

In my case the my-tutorial folder was created. We need to move to the newly created folder and package this project:

cd my-tutorial
atlas-mvn package

After the project was packaged move to the backend folder and run Atlassian Jira:

cd backend
atlas-run

Test application

After Atlassian Jira has been started go to the following url in your browser:

http://localhost:2990/jira

You need to login with the default credentials: admin:admin and go to cog-item -> Manage apps.

Screenshot 2020-05-10 at 08.29.47.png

You can see the menu of our app in the React section. But before trying our Atlaskit elements go to System -> Logging and Profiling and add the INFO logging level for the react.atlaskit.tutorial.servlet package.

Screenshot 2020-05-10 at 08.40.42.png

Now go back to Manage apps and click the Form menu option. You will see a form for entering data. This form was produced by the Form Atlaskit element:

Screenshot 2020-05-10 at 08.34.25.png

Fill all text fields and push the Submit button:

Screenshot 2020-05-10 at 08.44.50.png

Now you can open the atlassian-jira.log file and find a line like this:

2020-05-10 08:44:29,701+0300 http-nio-2990-exec-4 INFO admin 524x12509x1 15awhw2 0:0:0:0:0:0:0:1 /plugins/servlet/form [r.a.tutorial.servlet.FormServlet] Post Data: {"firstname":"Alexey","lastname":"Matveev","description":"No description","comments":"and no comments"}

It means that the data you entered in the form were caught by the backend servlet and logged into the log file.

Now let's choose the Dynamic Table menu item in the React section. You will see the Dynamic Table Atlaskit element:

Screenshot 2020-05-10 at 08.48.22.png

That is our application. Now let's see how it all works!

App's internals

Here is the folder structure of our app:

Screenshot 2020-05-10 at 09.13.36.png

backend contains Atlassian Jira app created from Atlassian SDK.

frontend contains UI elements which will be used in our Atlassian Jira app.

pom.xml is a parent project pom which defines two modules:

    <modules>  
        <module>frontend</module>
        <module>backend</module>
    </modules>

Now let's have a look at the frontend folder.

Part 2

7 comments

nice one

Hi good information. but how I make hot reload reactjs

Hello @Mehmet Cengiz TURANLI ,

pull version 2 from the repo:

git clone https://alex1mmm@bitbucket.org/alex1mmm/jira-react-atlaskit-archetype.git --branch v2 --single-branch

 There is the hot reload.

kmukul I'm New Here Aug 12, 2020

Thanks for the wonderfully detailed article. I am not an atlassian or java developer but I am still able to follow most of the instructions. I tried both v1 and v2 branch however I see the following error. I would appreciate your guidance.

 

Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Hello @kmukul 

your system is not a mac os system. follow the link for your problem solution

 https://stackoverflow.com/questions/40671567/npm-install-fsevents-errors

Comment

Log in or Sign up to comment
TAGS

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