Troubleshooting Jira Cloud App Integration: Buttons and Panel Display Issues

Jira Development Jira Cloud
, , , ,
1

I was trying to build an app on Jira Cloud. What I want to do is to display some buttons to have a quick access to other links on an issue of a Jira Project. I did manage to install my app and I can see the panel I created, but when Jira tries to retrieve the HTML file with the links it is not working.

I did follow the Atlassian Developer Guides (https://developer.atlassian.com/cloud/jira/software/getting-started/), so I am using the HTTP local server on terminal (npx http-server -p 3000 --cors) and ngrok (ngrok http 3000) for tunneling as it is described on the guides.

This is my “atlassian-connect.json” file:

{
    "key": "Jira",   
    "name": "Jira app",
    "description": "This a Jira APP",
    "baseUrl": ".ngrok.app",
    "authentication": {
        "type": "none"
    },
    "modules": {
        "webPanels": [
            {
                "key": "apps-panel",
                "name": {
                    "value": "Apps"
                },
                "url": "/apps-panel.html",
                "location": "atl.jira.view.issue.right.context",
                "weight": 100
            }
        ]
    },
    "scopes": [
        "read",
        "write"
    ],
    "contexts": ["issue"],
    "apiVersion": 1
}

Then there is the apps-panel.html which is really simple:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Apps Panel</title>
</head>
<body>
    <div id="apps-section">
        <h2>Apps</h2>
        <button id="retrieve-data-button">Retrieve Data</button>
    </div>
</body>
</html>

style.css file:

#apps-section {
    background-color: #f0f0f0;
    padding: 10px;
}

I did check that the app works on a navigator, so the problem must be while connecting with Jira. After enabling the development mode on my site, I did go to “Manage your apps” and Uploaded the App introducing “.ngrok.app/atlassian-connect.json”. So I can see on an issue the panel, but what I see is this:

(https://i.stack.imgur.com/zFZEz.png)

Any idea of what could be the problem or any good practice that I’m missing out here?

Thanks in advance!