How to call external API using Forge App

Forge
1

I’m trying to add a button that will send discord notification on click.

Here is my index.jsx

import React from 'react';
import ForgeReconciler, { Text,Button, useProductContext } from '@forge/react';
import { requestJira } from '@forge/bridge';
import api from "@forge/api";

const webhookURL = 'https://discord.com/api/webhooks/1201455081163615764/VEIy7tD63C2ZQ41131Rno8737qEN63xkVhG_698gAYe0YQRr4K-Mk_RPEXl3x_3hqIT4oA';

const App = () => {
  const context = useProductContext();

  const sendDiscordNotification = async () => {
    try {
      // Define the webhook URL

      // Create the payload for the Discord webhook
      const payload = {
        content: 'Hello from Forge!',
      };
  
      // Send the POST request to the Discord webhook URL
      await api.fetch(webhookURL, {
        method: 'POST',
        body: JSON.stringify(payload),
        headers: {
          'Content-Type': 'application/json',
        },
      });
  
      console.log('Discord notification sent successfully');
    } catch (error) {
      console.error('Error sending Discord notification:', error);
    }
  };

  React.useEffect(() => {
    if (context) {
      sendDiscordNotification();
    }
  }, [context]);

  // render the value of `comments` variable
  return (
    <>
      <Button onClick={sendDiscordNotification}>Send Zeuz Notification</Button>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

And here is my manifest.yml

modules:
  jira:issuePanel:
    - key: hello-world-hello-world-issue-panel
      resource: main
      resolver:
        function: resolver
      render: native
      title: Testing App
      icon: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: src/frontend/index.jsx
app:
  id: ari:cloud:ecosystem::app/bg6xxxxxxxxxxxxxxxxxxxx6
permissions:
  scopes:
    - read:jira-work
  external:
    fetch:
      backend:
        - 'https://discord.com'

But When I click on it, i’m getting

Refused to connect to 'https://discord.com/api/webhooks/xxxxxx/xxxxxxxxx-xxxxx' because it violates the document's Content Security Policy.
~```

Can anyone please help me out?
2

Have you deployed the changes you made to the manifest?

Quoting the docs:

“If you make changes to the manifest.yml file, you must deploy the app with the latest manifest. This is needed for the tunnel to pick up the changes.”

3

Yes, I did the following
forge install --upgrade
forge deploy

4

Ok I think I know the reason. I can see you’re using UI Kit 2. External fetch requests need to be done via the resolver rather than from the front-end.

https://developer.atlassian.com/platform/forge/ui-kit-2/#non-product-fetch-requests-and-the-storage-api

4 Likes
5

Thank you. Let me try! For my use-case. (Calling out discord webhook). Is this the idea way of doing it?

6

Yes, it’s the only supported way to send external fetch requests if you’re using UI Kit 2.