Are there any working examples or more in depth tutorials / instructions around for confluence apps?

Forge Forge UI Kit and Custom UI
1

Hi everyone, I’m having a bit of trouble getting started. One of my ways of learning is to look at how other apps have been developed and play around with the syntax to understand components. I’m definitely more of a data engineer, so it’s been a steep learning curve!

I’ve completed the tutorial (with a nice hello world that I can edit the text of in either .resolver or .index), but this only got me so far. I’d like to play with other visual components and understand how to properly call them. All the examples on the link below (at the Atlassian site) seem to be a out of date, and even after going through the steps in each readme, adding these apps to the confluence page just results in an error: https://developer.atlassian.com/platform/forge/example-apps-confluence/
(e.g. this is after going through register, npm install all the conflicting imports, deploy, install).

As this appears to be a growing body of work, I’m struggling to find any working examples or video tutorials out there. Where did everyone else start? Any links to more detailed Confluence / forge tutorials would be much appreciated :slight_smile:

Cheers,
M

2

Welcome to Forge @M_Potts,

Here’s a video tutorial on building a Confluence Forge app:

To your point about playing around with other visual components, it might help to understand the underpinnings of React. The initial UI Kit is “React inspired” (but not quite React). UI Kit 2 is pure(r) React. And Custom UI would theoretically let you use any web framework, but commonly, developers draw from the React components of Atlaskit.

3

Can you be more specific about “out of date”? I guess this is related to the problem of “just results in an error”. Can you let me know what error(s) you encountered? I might be too familiar with Forge to see what’s going wrong but I didn’t find any problems.

4

Hi there @ibuchanan, I’m sorry for the delay, and really appreciate how quickly you got back to me. I’ve only just started being able to tinker again!!

I am working through the youtube tutorial now - it’s been really handy. I’ll also have a look through Atlaskit by Atlassian and see if I can find some use cases of this. I think this might be what I’m after, as I read through the UI Kit components and felt like there weren’t too many things in there. Either that or I was reading it incorrectly! :frowning:

The error I encountered was:

Something went wrong

Trace ID: adb69f21b566470283f4632365622f31 Function timed out past limit of 25.03 seconds

This happened on the wheel of fortune example app.
I followed the readme to the letter as well…

  1. Clone this repository:

    git clone git@bitbucket.org:atlassian/forge-quiz-app.git

  2. Change to the app directory:

    cd forge-quiz-app

  3. Register the app:

    forge register

  4. Build and deploy your app by running:

    forge deploy

  5. Install your app in an Atlassian site by running:

    forge install

  6. Develop your app by running forge tunnel to proxy invocations locally:

    forge tunnel

The DACI helper app example that I also tried felt like more of a built-in error. E.g. it’s not coming from Atlassian but the app itself. I’ll read up on that one more.

5

Hello,

Could you add more examples Confluence apps using UI kit 2 on https://developer.atlassian.com/platform/forge/example-apps-confluence/#page-approver-app-with-ui-kit-2 ?

I would understand how structure my code in “resolvers” folder vs “fronted” folder. and an example to fetch an external API.

BR

6

You can use this example app as a reference for calling an external API. It’s a Jira app but the steps are the same - adding external permissions to the manifest, calling the API in your resolver, etc.

1 Like