Call External API in Forge Custom UI

Have any one been able to able to call an external API from Forge Custom UI.

I was able to achieve the same in UI Kit. However with Custom UI so far I am only able to make Jira internal API calls…

Any code samples would be really appreaciated.

Thanks,
Majo

1 Like

Without code examples of your problem it might be difficult to troubleshoot.

This is a custom UI example that fetches the atlassian.com website. No changes were made to the static/ section.

// src/index.js
import Resolver from '@forge/resolver';
import api from '@forge/api';

const resolver = new Resolver();

resolver.define('getText', async (req) => {
  const txt = await api.fetch("https://www.atlassian.com").then(res => res.text());
  console.log(txt);

  return txt;
});

export const handler = resolver.getDefinitions();

Thank you JoshuaHwang

Can I do a call like this from the React app directly?

@GyorgyVARGA
Yes you can. You just need to allowlist the domain you are calling in the Client Fetch manifest permissions of your app. See this section on how to do so.

Hi @PeterYu! Thank you for your answer. I am looking for a way to deal with file upload. Currently I am facing this problem: Can't post multipart form data file in new NodeJS runtime - #3 by GyorgyVARGA
I am looking for a workaround, maybe to upload the image directly from the client, but that is kind of like an antipattern here, because I am exposing my keys on the client. Btw I am using Cloudinary to store the images. If the multipart form data error doesn’t get resolved I will use this guide to do this inside the React app:
Upload Images with React-Dropzone

Hi György

This is quite an old thread. It would be more appropriate to create a new thread for this issue.

Hi @JoshuaHwang !
Yes, I’ve created this: Can't post multipart form data file in new NodeJS runtime - #3 by GyorgyVARGA
Please look at it, hopefully you can help me too! :slight_smile: