Forge tunneling CustomUI with UI resolver => Error "Cannot read property 'callBridge' of undefined"

Forge
,
4

Did you set the tunnel port for your custom resource, @FranzBinder?

resources:
  - key: custom-ui-resource
    path: static/hello-world/build
    tunnel:
      port: 3000 # Assume that the React App is running on port 3000

A description of the dev loop with React Custom UI and Forge Tunnel:

  1. Finish your manifest.yml file with all the modules you need
  2. Make sure to add the tunnel port config for your Custom UI resource if you want to develop React App with Forge Tunnel
  3. Deploy the app and install it on your Atlassian Site with forge deploy and forge install. Note that you need to re-deploy the app every time you make changes to the manifest.yml file.
  4. Start the development server of React App (normally by npm start) and the forge tunnel. No matter in which order you start them, but they both should be running at the same time.
  5. Go to the Atlassian Site and refresh the Custom UI page. Now each time you make changes to the React code, you should see the React terminal is re-compiled and the IFrame refreshed (Only the IFrame of the Custom UI is refreshed, not the whole Atlassian page)

As I read your answer, these are some points to note:

To make sure that Tunnel is working with React Development Server

If you open the page where Custom UI is running (or refresh it), you should see this in your Forge Tunnel Console:

image
image1255×276 9.62 KB

It makes sure that your Custom UI resource is loaded from localhost:3000 - your current development server.

The changes to React Code only trigger the React Console (which was started by npm start)

If you made changes to the React code, you will not see the re-bundle in the forge tunnel console, this re-compile is only showing in the React Console.
image

If you make the changes to the Forge code (inside src directory), you should see the re-bundle happens in the Forge Tunnel console as the describe.

9 Likes