Full Connect App example with Jira Integration through React

Jira Development Jira Cloud
, , , , ,
1

Hi guys

I’ve been reading through a lot of the documentation with regards to creating a connect app. At first glance, it’s very well documented and very impressive. I’m also very impressed with the Developer Community.

However, once you start getting into reading all of it, you start noticing there’s hardly any examples of actually interacting with the Jira Api through React.

The very first how-to-guide is this one:
https://developer.atlassian.com/cloud/jira/platform/getting-started-with-connect/
This one is very cool and gets you excited. It shows you how to create an app, within Jira, that has its own page - great, this is what I want.

Now, the next step is to try and perform functions on Jira within the app as the user, but from React. Now this is where I struggle.

You can use connect express to create your app, which is useful and comes with react and handlebars examples:
https://bitbucket.org/atlassian/atlassian-connect-express/src/master/README.md

I think it would be easy to do this from the handlebars example page, as you’re on the client so you can just use the AP.request, but I don’t really know what handlebars are at this point :laughing: please forgive my ignorance. I mean it looks very simple and easy enough to understand. However, I’ve been doing courses on React and this is where I’d like to do it and it just makes more sense to me to do it there.

When I navigate to the examples of the Jira Rest Api, for example, the creating an issue example:
https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issues/#api-rest-api-3-issue-post
The node example is the one I’m interested as it’s the closest to react, but it is doing basic authentication, which is not what I’m looking for, it also requires hardcoding the host url which isn’t ideal.

When you look at the rest api documentation, it mentions authentication:
https://developer.atlassian.com/cloud/jira/platform/rest/v3/intro/#authentication
Once I found this page, this is where the rabbit whole began and now I’m completely lost.
It says that the authentication is built in, which is exactly what I want.

This then leads to this page:
https://developer.atlassian.com/cloud/jira/platform/user-impersonation-for-connect-apps/
I’ve read this page about 5 times now and each time the picture becomes more clear, but I still want an example

I think this page might contain the example:
https://bitbucket.org/atlassian/atlassian-oauth2-samples/src
There is a java and javascript example.
It looks like it’s doing the right thing. But now how do I integrate this into my connect express example.

Please someone help me as I’m feeling like a complete noob. Should one be using the handlebars for integrating with the API, if so, when should the React be used.

Is there a full connect app example with jira integration through React, while impersonating the user somewhere that I could use?

2 Likes
2

Hey,

While I don’t have a repository where you could look into, I could say how it’s working for our plugin.

  • 2 different directories (Atlassian Connect Express / React Frontend)
  • React Frontend (Create React App) is build into the static directory of the node Backend
  • React Frontend does exports a list of functions/class to init the UI of the different routes
  • ACE Node Backend routes add a initMethod Option to the handlebars template to init the UI. The layout.hbs contains something like this
<script>
	EpicSumUpAppCloud.initPlugin().then(function (result) {
		return EpicSumUpAppCloud.{{initMethod}}();
	}).catch(function(error) {
		return EpicSumUpAppCloud.renderError(error)
	});
</script>

To improve the dev performance to see the latest changes, we use a proxy to our local running react for the static files. With react CRA 4 the hot reload is often working within the iframe.
In case you want to use CodeSplitting / Chunks, you may need to read the asset manifest with your node/express backend to inject it.

Thats at least how we currently implement ACE with react. Maybe someone has a better approach. I did read something about a ACE next.js project, but haven’t tried myself yet

1 Like
3

@m.herrmann thank you so much for this! This link you gave me, did the trick: rhysdiab/atlassian-connect-express-next