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

Forge
,
1

Hey there,

based on the tunneling description for custom UI I added the tunnel/port statement to the manifest.yml. I started the tunnel and on a second terminal I started npm start which activated the browser with localhost:3000

This works perfect unless I invoke @forge/bridge.
The browser shows me immediately “TypeError: Cannot read property ‘callBridge’ of undefined”!

I didn’t recognize this limitation so far.
I’m doing something wrong?

Thanks for giving me any hint!

tunnelLocalHost-Error

2

You have to run your Custom UI app inside the Atlassian Site (Jira, Confluence).
You cannot directly run it by open localhost:3000.

2 Likes
3

Thanks @nhac.tat.nguyen for your fast reply!

I assumed that some “magic” would be necessary to make this work :wink:

But anyway the forge tunnel never triggers a rebundle of changed static code. (the localhost shows “compiling sucessfully” - but forge tunnel keeps quite.)
I tried this even without the forge bridge - with a stripped-down React app.

The behaviour of “changes to your source code triggers a rebundle” as described in “Tunneling with custom UI” I can’t see.
Maybe also some Atlassian experts can explain if / how I misinterprate the documentation.

Cheers,
Franz

P.S. I’m creating a Confluence macro on a Windows server

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
5

@nhac.tat.nguyen is giving all the needed details :+1:

Basically you only need to ensure that your React app is indeed started in such a way that it supports hot-reload.
Then you need to ensure that you link your local React server port to the one the Forge app tunnel should serve.

This way, your Confluence macro app will reflect the changes as soon as they are detected (hot-reload), whenever you change a React file in your static folder.

1 Like
6

Thank you very much @nhac.tat.nguyen!!! :pray: :pray: You just made my day! :grinning:
Furthermore also thanks to @XavierCaron !

Due a copy/paste error I didn’t set the tunnel correctly. But I was misleaded by the fact that the development server started normally with localhost:3000 - which is obviously the React default.

A very good indicator for this is your hint regarding forge tunnel start:
There has to be the output “Received proxy request. Serving file index.html for resource main from specified address http://localhost:3000”, when the developer server was started.
If the developer server wasn’t started an error appears.

BR,
Franz

1 Like
7

I’m glad that my answer helps you :smiley:
Have fun with Forge!

1 Like
8

Bạn ơi, mình nghĩ là bạn là người Việt Nam, nếu phải cho mình xin facebook với hỏi 1 sô cái về Custom UI được ko

1 Like
9

@quypv3 sent you a message.

10

Thanks, Nhac!
I did these steps and it’s working but without the css style,
And when I edit code in react, the IFrame did not reload.
Do you have any information about that? I also VN too

I found the solution, i need to remove Content-Security-Policy meta tag so it can connect to localhost

11

Hi @VuVo,

Great that you found the solution!

Cheers

12

Hi all, I’m having a trouble with forge tunnel. When I first run, it seem to be ok when the terminal stop at Listening for requests…, but when I change the code at src folder, tunnel will rebundle again and again in a loop. So it make WSL take full load on Windows. Is it a bug or I have something wrong with my code