+unable to view my anuglar build-app in jira

  1. I already have an Angular build app, Is it possible to upload that app with the atlassian-connect.json descriptor file in the root to Atlassian??
  2. After trying to upload the URL https://a38b-20-197-12-22.ngrok-free.app/atlassian-connect.json with the descriptor file, the Angular build app was installed, but I am unable to view it. It throws an error.

Could you please share your connect descriptor(atlassian-connect.json) file?

Yeah sure @DeepakPandey ,
image
This is the URL: https://1b37-20-197-12-22.ngrok-free.app/atlassian-connect.json. After uploading this to the Apps, it throws an error like this:

Something went wrong on our end

If this keeps happening, share this information with your admin, who should contact support.

Reload page

Hi @DeepakPandey

I wanted to check in regarding the issue I mentioned earlier. I shared the URL for the atlassian-connect.json file, but I haven’t received any further updates. Could you please help me troubleshoot the error I’m facing, or let me know what additional information you might need from my side?

Looking forward to your response.

Hi

Are you able to access this link directly in the browser and see the content of atlassian-connect.json?

https://1b37-20-197-12-22.ngrok-free.app/atlassian-connect.json

Also can remove the / from baseUrl and then try installing the app? Ex:
“baseUrl”: “https://1b37-20-197-12-22.ngrok-free.app”

Yes, I’m able to see the content of the atlassian-connect.json file when accessing the link directly in the browser. I tried uploading the app using only the base URL as you suggested, but it throws an error: “https://1b37-20-197-12-22.ngrok-free.app cannot be installed on this cloud instance.”

Even after successfully uploading the app with this format"https://1b37-20-197-12-22.ngrok-free.app/atlassian-connect.json", it doesn’t display anything after installation.

After a successful installation, you need to navigate to ‘Apps’ on the top menu to see your apps. Click on your app, it should display the content you implemented in the index.html file.

Thanks, @DeepakPandey.

When I navigate to ‘Apps’ after installation, I encounter an issue where the application appears blank and eventually throws the following error:
“Something went wrong on our end. If this keeps happening, share this information with your admin, who should contact support. Reload page.”

Could you advise on what might be causing this?

The error might be due to ngrok URL. You need to open the URL https://1b37-20-197-12-22.ngrok-free.app in your browser and then click on the Visit Site button. After this, you can try accessing the app in Jira, and it should work.

1 Like

hey, @DeepakPandey

The error persists even after clicking the Visit Site button.

Hi @InfraSupport

I wanted to share how I typically debug such issues when working with ngrok:

a) Your development computer needs to act as a backend system. Usually, with Node.js and the Atlassian Connect Express library, your app registers with the Jira server on startup. You should see console output like this:

Registered with host at https://yoursite.atlassian.net/

If you’re using the free version of ngrok, it’s essential to open your ngrok URL manually and click the confirmation button first. As suggested by @DeepakPandey, click on “Visit Site”. You need to do that for every new ngrok url.

b) Open your ngrok URL at https://your-random-ngrok-url.app/atlassian-connect.json and verify if the Atlassian Connect JSON is being served correctly by your development machine. If it doesn’t load, check your backend service.

c) In Jira, navigate to the page where you expect the app to appear. Then, open the browser’s developer tools. Since the app is rendered within an iFrame, use DOM inspection to locate it. Check if the iFrame points to your ngrok URL, e.g., https://your-random-url.app/. If not, stop and restart your backend server so that the app gets retriggered.

I hope this helps! Bernie.

P.S. For Angular to work correctly, ensure that you have <base href="./"> in your index.html file.

Hey @berecom,

I’ve tried all the solutions you suggested, but unfortunately, it’s still not working. I’m continuing to receive the same error. Could you please help me resolve this?

Thanks in advance!

Hi @InfraSupport,

As suggested, please open the link in the menu in a new tab. I have randomly picked an app to show you how this looks like:

2024-10-20_11h26_25

Check if this is possible and that you can open your index.html in a new page.

If it’s possible to open the page, please check on newly opened browser window the source of the iFrame.

This may look like this:

When all this works, your app is properly set up and ready for development.

Hey @berecom,

I didn’t see the options you mentioned in the second screenshot. Could you clarify or provide more details on where I should be looking? Here’s what I see on my end:

Thanks for the help!

Hi @InfraSupport ,
seems you page get not loaded.

In this screenshot you could verify that by clicking on “view page source”.