Error with Custom UI Resource Path in Forge App Manifest

Forge Forge UI Kit and Custom UI
1

Hello everyone,
I’m new to Atlassian Forge and I’m working on an app. I’m encountering a validation error related to the UI resource path in my ‘manifest.yml’. The error states: “Custom UI resource must be a directory. (src/frontend/index.jsx) in jira:projectPage module is not a directory valid-resource-required.”
Here is my ‘manifest.yml’:

modules:
  jira:projectPage:
    - key: engagement-project-page
      resource: main
      resolver:
        function: engagement-overview
      title: Engagement Score Overview
  function:
    - key: engagement-overview
      handler: index.engagementOverview
resources:
  - key: main
    path: src/frontend/index.jsx
app:
  runtime:
    name: nodejs22.x
  id: ari:cloud:ecosystem::app/da87265f-1fc2-48c9-8fa6-e5bc374c69c1
permissions:
  scopes:
    - read:jira-work

I understand that the resource should point to a directory and not a file, but I’m unsure how to structure my directory to resolve this issue correctly. Any suggestions or examples on how to properly set up the resource directory for a jira:projectPage would be greatly appreciated.

Thank you in advance for your help!

2

Hi @RaananTivoni ! You can create a template app for jira:projectPage and see how the folder is structured.
To create a template app, execute the following command:

forge create

Then type the name of your app, then choose Custom UI, then Jira and then jira-global-page.
As a result a new folder which equals to the name of your app will be created. Go inside the folder.
Then go to static/hello-world and execute:

npm i
npm run build

You will see a folder build inside static/hello-world folder. Go inside the build folder and it is exactly how the folder may look like.

Also in the manifest.yml you will see that the main resource references this folder.

3

@alex_sam,
Got it, thanks!
Regarding the same topic, can I create a UI Kit template app and then add an jira:projectPage Custom UI module?

4

Yes, you can. If you have multiple modules in your app then some of the modules can be ui kit when others custom ui. But one module should be either ui kit or custom ui

5

@alex_sam, Actually, this is the topic case. I created a UI Kit app and then tried to add a Custom UI module, but I am missing the Custom UI files that you mentioned in your first comment.

6

You can create a new template app from custom ui project page and add the static/hello-world folder from the new app to your old app (the one you created for ui kit)