Atlassian-connect-express and create-react-app

Hi!

I am trying to figure out how to include my own react app with Atlassian Connect Express. I have managed to follow the basic tutorial to get things going (connect the helloworld app to my jira cloud dev instance); however, I can’t get my react app included.

Is there a boilerplate/skeleton for ACE+create-react-app? What must I do in order to get my react app working with ace (jira)?

I am a beginner in Atlassian app development; thus, I apologize if this question is incorrectly organized and/or a stupid one.

Br,
Pirkka

1 Like

Any help with this? I am sure a lot of beginners are stuck on this very same topic.

2 Likes

Hi @pirkka.palmumaki,

If you are using React with JSX, you will need a tool like Webpack to convert your React+JSX to JS/CSS/HTML files. Those outputted files can be added to the public/ directory of the ACE template. Update the URLs of your modules in atlassian-connect.json to point to these files in public/ instead of the current Handlebars-based routes.

1 Like

Hi @pirkka.palmumaki. As you know ACE is based on Express framework. So it works the same way as with other Express applications: you decide how to deliver your front-end. I suggest to begin with understanding of Express and React one by one. After that you can try Webpack in order to increase flexibility. You’ll find your solution during the process of learning.

Your question is quite wide to answer it with a couple of sentences. Topic is really huge. But in two words: React client-side library helps you with your front-end code that should be bundled(actually not necessary to bundle, but that’s nice approach) as one file file and could be delivered by Express.js framework as part of html(included inside script tag). The idea is: you should understand the ways of how you can deliver front-end code and markup with Express.js.

The suggested way will help you not only with Atlassian Cloud development, but also will bring you into the world of Node.js and modern front-end development.

Temlate Engines in Express.js (Handlebars in ACE)
Serving Static Files in Express.js
Add React To a Website (Read closely)

Hi! I’ve just merged support for react / atlaskit into the ACE template. See this post: Atlaskit and ACE - #15 by jhazelwood

1 Like