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

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

Avatar

1 badge earned

Collect

Participate in fun challenges

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

Challenges
Coins

Gift kudos to your peers

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

Recognition
Ribbon

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!

Leaderboard

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,456,290
Community Members
 
Community Events
176
Community Groups

How to develop connect addon UI using react (and back end in node) with AP module

Edited

I would like to keep react project saperately and use a common UI for my server as well as connect plugin.

I have used https://bitbucket.org/atlassian/atlassian-connect-express to create connect addon

and used https://github.com/facebookincubator/create-react-app to create a react app. 

I did a build using npm run build for react. and copied these files generated by build to  public folder of connect addon. This works well till i do not need AP.

The moment I wanted to use AP.request with react to call jira api from my addon, I got stuck. How do i achive using AP.request from react app?

Is there a sample code where react build is done saperately for addon and then integrated it into the node project(Which server api onlly)?

I did find a very useful stuff in https://www.atlassian.com/atlascamp/2017/archives/advanced-techniques/react-for-re-use-creating-ui-components-with-confluence-connect

But this is more of integrating component in to addon and not regarding how to create your addon UI independently in react. Any idea?

2 comments

ramiro Atlassian Team May 18, 2018

You can refer to AP by using `window.AP`:

 

window.AP.require("endpoint", function(request) { 

  request({ url: "/badges",

  type: "GET",

  contentType: "application/json",

  success: success, error: error });

HI Shivprasad,

 

I hope you have completed your addon by now. I was wondering, is it possible to create a multipage react add-on on Jira? 

 

I already have an existing react application which I want to deploy it in Jira as an add-on.

 

Furthermore, I have created 2 pages sample create-react-app application but its routing does not work. 

Please help if you have a bit of experience in this, or if you have any sample code.

 

Regards.

Sorry for late reply. we did not create multi page react addon. We can configure multiple entry points. But with multiple entry points, chunk loading performance is an issue

Thanks

Shiv

Comment

Log in or Sign up to comment