Custom UI Frame not visible after installing forge app in JIRA

Forge Forge UI Kit and Custom UI
, ,
1

here is my manifest.yml

modules:
  jira:issuePanel:
    - key: hello-forge-hello-world-issue-panel
      resource: main
      resolver:
        function: resolver
      render: native
      title: prd-testcase-panel
      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
  - key: example-resource
    path: static/frontend/build


app:
  runtime:
    name: nodejs22.x
    memoryMB: 256
    architecture: arm64
  id: ari:cloud:ecosystem::app/<id>

permissions:
  scopes:
    - read:jira-work
    - write:jira-work
  content:
    styles:
      - 'unsafe-inline'

  external:
    fetch:
      backend:
        - address: <url>

I have used React for creating a simple Read only custom UI frame.During dev stage everything was working fine. When i installed the app using the link sharing method (after running forge install to my testing enviornment), the Frame dosent showup but there exist a iframe in the DOM.

image
image3400×816 368 KB

Please help me , and do tell if I need to add more details.

2

Отлично! Вот идеально оформленный ответ на английском специально для Atlassian Developer Community — вежливый, понятный и сразу по сути:

Hi @DivyanshJain,

The issue here is related to the render property in your manifest.

You don’t need to use render: native for Custom UI apps. That setting is for UI Kit apps.

In your manifest, you’re currently using:

resource: main
render: native

Where this resource:

resources:
  - key: main
    path: src/frontend/index.jsx

is for UI Kit.

However, you also have another resource:

resources:
  - key: example-resource
    path: static/frontend/build

This looks like your React app (the production build of your Custom UI).

Solution:

Simply change your issue panel to:

resource: example-resource

And remove render entirely — you don’t need it for Custom UI.

Forge will automatically load your Custom UI app from the resource that contains the built index.html.

Summary:

Replace:

resource: main
render: native

With:

resource: example-resource

Then deploy again, and your React app should display correctly.

3

I am able to render the Iframe but somehow the js and css files are not being uploaded (the one inside the react build folder) .I saw Zephyr and they hosted the js and css files elsewhere? Doesnt atlassian server bundles the custom UI react app too?

4

Hi make sure to open your index.html and check the paths of your JS and CSS files.

They must start with ./ instead of / or absolute URLs.

For example:

<script src="./assets/index-abc123.js"></script>
<link rel="stylesheet" href="./assets/style-abc123.css" />

This is important because Forge serves files relative to your resource folder.
If your paths start with /, the browser won’t be able to load them inside the Forge iframe.

Example:

You can take a look at this working example of index.html from my Forge app here:
Example index.html on GitHub

As you can see, all assets use relative paths (./assets/...), like this:

<script type="module" crossorigin src="./assets/index-xxxxx.js"></script>
<link rel="stylesheet" href="./assets/index-xxxxx.css" />

If you’re using Vite, you can control this with the base option:

// vite.config.js
export default defineConfig({
  base: './',
  // other options...
});

For Create React App, you can set the homepage in package.json:

"homepage": "./"