How to feed Atlaskit components to Jira Connect app (not just static html) from non-ACE backend

Question

This may be a stupid question but I'm not a front-end dev so don't know much JS and even less about React. Our backend system is in Python/Django so I am having to do things in a more involved way than if we were using the Atlassian Connect Express framework. I am setting up a Jira Connect app and have done the "Hello world" tutorial successfully. I have a page and a webpanel from static HTML just fine. The django backend serves this content in response to the call:

Fixed Agile!

And Jira displays this: So all the comms are working. Now I want to go to the next level and start putting together a UI with forms and standard Atlassian components like a badge (https://atlassian.design/components/badge/examples). The example code for this is: import React from 'react'; import Badge from '@atlaskit/badge'; const BadgeDefaultExample = () => { return {8}; }; export default BadgeDefaultExample; But I can't figure out how to supply this from django views to make it display in Jira. And this reflects my fundamental lack of understanding of how react works in the backend/frontend. Can someone tell me what the contents of a HTML file, that my backend serves, should be to display something like the above? I've tried wrapping it in the head, body, script, etc. but I get just a spinning view in Jira.

kdinn · Answer

Hi, and thanks a lot Prince.

As per my answer here, I have it working to the point where it is supplying HTML and Atlassian React components. I am not sure this is the best way of doing it, your suggestion of just sending JSON sounds like it might be a good option too. I will look into it.

kdinn · Answer

OK - so after much research on how React works, I appear to have solved this to the point where I can render a badge in Jira from my connect app being served by Django. For other people's info, if they encounter the same situation as me, I followed the instructions in this extremely useful tutorial: How to Serve a React Single-Page App with Django This got me set up with the necessary systems to generate the JS in the right static files in order to present it from a view as a response to the call from Jira. index.html {% load render_bundle from webpack_loader %}

Fixed Agile!

{% render_bundle 'jira' %}

index.jsimport React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render( , document.getElementById('app') ) App.js import React from 'react' import Badge from '@atlaskit/badge'; const App = () => { return (

{8}

) } export default App and look out for having to install the atlaskit components: npm install --save-dev @atlaskit/badge This got me to the point of this in my app in Jira! :-)

Prince Nyeche - ELFAPP · Answer

If your backend is python and the frontend is React, then you should have the frontend make an HTTP request to the backend. Using React, you can then parse the response and display that in the frontend UI. However, this method would typically be easy if you're familiar with Javascript (i.e React). Your backend wouldn't serve HTML content but instead, I would assume, you should return a JSON serializable content as a response from your backend that the frontend can parse easily into a presentable format.

I think you should familiarize yourself with the context of front-end design using React before venturing into connect apps. Not sure if what you're looking for is something someone can guide or explain within a few sentences here in the community. Subsequently, you can build your entire frontend with python's Jinja templating (combining frontend + backend as one). Then you can use plain Javascript in AC context to design the look and feel like Atlassian UI. Without using React, the Atlassian connect framework can be separate Javascript files using Jquery which you can download as part of the Atlassian UI framework and work on it from any programming language.