Forge Custom UI default hello world app with Custom UI does not work

Forge Forge UI Kit and Custom UI
, , , ,
1

I created a Forge app with Custom UI. The app is still boilerplate app but I can’t seem to make the auto-reload feature work.

My resources block look like this:

resources:
  - key: uiModificationsMain
    path: static/hello-world/build

Custom UI guide here https://developer.atlassian.com/platform/forge/build-a-custom-ui-app-in-jira/ does not mention anything about auto-reload.

Currently, I have to run npm run build every time I make any changes to test it. What am I missing?

Note: I am using Firefox. Looks like it’s the same issue on Chrome.

2

Ok, just needed to add tunnel section:

resources:
  - key: uiModificationsMain
    path: static/hello-world/build
    tunnel:
      port: 3000

Unfortunately, I have another problem now :frowning:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).

I have just too many troubles making the default hello world app work? :frowning:

Edit: It is actually trying to load something from http:/localhost:8002 when Custom UI app is running on 3000 and tunnel also is set to 3000.

Screenshot 2022-07-22 at 09.03.34
Screenshot 2022-07-22 at 09.03.341566×312 65.4 KB

2 Likes
3

Hi,

Don’t know this one off the top of my head. I’ll get in contact with the relevant team though.

4

Hmmm, I don’t know anything in the forge tunnel that would use port 8002. I’ll check on Tuesday but if you could also check on your end if you’re setting something to that port that might lead to the problem.

Someone from the team previously mentioned suggests

permissions:
  content:
    styles:
      - unsafe-inline
    scripts:
      - unsafe-inline

This information is available in our documentation here.

Do let us know if either of these work out for you.

5

Thanks for the reply. I have already added the permissions for styles and scripts but maybe my yml config was wrong. The error is no longer there.

However, I got another error only on Firefox (works on Chrome).

Content Security Policy: The page’s settings blocked the loading of a resource at ws://localhost:3000/ws (“connect-src”).

Screenshot 2022-07-23 at 15.14.51
Screenshot 2022-07-23 at 15.14.513032×272 108 KB

I have no idea why it works on Chrome. I guess Firefox has stricter CSP enforcement?

6

Hi again, the team mentions adding the following to your manifest. It appears firefox blocks websockets

permissions:
   external:
      fetch:
         client:
            - 'ws://localhost:3000'
2 Likes
7

Looks like localhost is not accepted here. I get this error:

error    Invalid 'external.fetch.client' permission in the manifest.yml file - 'ws://localhost:3000'
8

Hi again, thanks for following up.

Would you be able to create a minimal reproducible example?

The team would like one for easier troubleshooting and we’ll be able to give you an answer quicker.

9

Apologies for taking so long

There was a security policy that prevented non-TLS websockets from being added. That policy still remains but for tunnelling we’re allowing localhost tunnelling.

Please download the latest version of the Forge CLI for it to work