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
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!
You have to run your Custom UI app inside the Atlassian Site (Jira, Confluence).
You cannot directly run it by open
Thanks @nhac.tat.nguyen for your fast reply!
I assumed that some “magic” would be necessary to make this work
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.
P.S. I’m creating a Confluence macro on a Windows server
Did you set the tunnel port for your custom resource, @FranzBinder?
- key: custom-ui-resource
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:
- Finish your
manifest.yml file with all the modules you need
- Make sure to add the tunnel port config for your Custom UI resource if you want to develop React App with Forge Tunnel
- 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
- 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.
- 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:
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
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.
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.
@nhac.tat.nguyen is giving all the needed details
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.
Thank you very much @nhac.tat.nguyen!!! You just made my day!
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.
I’m glad that my answer helps you
Have fun with Forge!
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
@quypv3 sent you a message.