How to feed Atlaskit components to Jira Connect app (not just static html) from non-ACE backend
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:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/@atlaskit/css-reset@2.0.0/dist/bundle.css" media="all">
<script src="https://connect-cdn.atl-paas.net/all.js" async></script>
</head>
<body>
<section id="content" class="ac-content">
<h1>Fixed Agile!</h1>
</section>
</body>
</html>
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 <Badge>{8}</Badge>;
};
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.
2 answers
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
<!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/@atlaskit/css-reset@2.0.0/dist/bundle.css" media="all">
<script src="https://connect-cdn.atl-paas.net/all.js" async></script>
</head>
<body>
<section id="content" class="ac-content">
<div class="p-3 bg-light shadow">
<h1>Fixed Agile!</h1>
<div id="app"></div>
</div>
{% render_bundle 'jira' %}
</section>
</body>
</html>
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(
<App />,
document.getElementById('app')
)
App.js
import React from 'react'
import Badge from '@atlaskit/badge';
const App = () => {
return (
<div>
<Badge>{8}</Badge>
</div>
)
}
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! :-)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.