Forge tunnel, Custome UI & resource.tunnel.port in manifest: CSP violations, page doesn't load

Forge
1

I’m trying to use ‘forge tunnel’ with a custom UI. I added the ‘resource/tunnel.port’ to have the front-end reloaded:

  - key: admin-ui
    path: static/frontend/build
    tunnel:
      port: 3001

Then, I run the dev server (react-scripts start) + forge tunnel:

  • The front end work fine on localhost:3000
  • The front end loads initially fine on localhost:8002 (opened by forge tunnel). However, I get CSP warnings and the reloading does’nt seem to work:
    image
    image1990×770 152 KB
  • The front end fails to load properly when included in the Forge app. Seems like the CSS or other resources are not loaded. It does work outside of forge tunnel

I tried to add CSP policies, but it seems Forge doesn’t like adding ‘localhost:3001’

app/manifest.yml
27:11   error    Invalid 'external.fetch.client' permission in the manifest.yml file - 'localhost:3001'. Learn more about permissions at: https://go.atlassian.com/forge-permissions.  valid-permissions-required

X 1 issue (1 error, 0 warnings)
  Issue found is not automatically fixable with forge lint.

What am I missing?

2

Seems to be a known issue, you can vote for / comment on it at [FRGE-353] - Ecosystem Jira

As a workaround, OP suggests:

Adding a wildcard “*” to your manifest’s external sources in order allow all domains (that includes localhost)

1 Like