BridgeAPIError: Unable to establish a connection with the Custom UI bridge

[MunibQazi]

I am trying to setup tunnel with ngrok but getting this error.

Unable to establish a connection with the Custom UI bridge.
      If you are trying to run your app locally, Forge apps only work in the context of Atlassian products. Refer to https://go.atlassian.com/forge-tunneling-with-custom-ui for how to tunnel when using a local development server.
    
BridgeAPIError@

Here are the steps I have taken:

1. Create ngrok.yml file with following:

version: 2
log_level: debug
region: us
authtoken:[MY AUTH TOKEN HERE]

2. Set up ngrok file in forge tunnel
   forge settings set ngrok-config-path ~/Library/Application\ Support/AddressBook/ngrok/ngrok.yml

3. Started tunnel with following command:
   forge tunnel
   it started successfully and showed messed: Listening for requests...

4. Started my react project on port 3000 with: npm start

5. Open browser and open the url: localhost:3000

and here i see the error.

[ibuchanan]

Welcome to the Atlassian developer community @MunibQazi,

As of a couple weeks ago and Forge CLI v10.1, forge tunnel now uses Cloudflare instead of ngrok. As the tunneling docs now explain:

If you are using a firewall, you might see new connections to Cloudflare tunnel infrastructure. Please allow these for tunneling to work.

[MunibQazi]

@ibuchanan Thanks. What I understand is, forge tunnel now use cloudflare instead of ngrok and does not required any additional steps.
The issue is, without ngrok, with default steps, I am still seeing this same error. Can you please guide me what are the possible fixes for this issue?
P.S. I am not using any firewall.

[BoZhang]

Hi @MunibQazi, the @forge/bridge package which you are using will only work when run under an Atlassian product (the bridge requires some properties defined under the window object, which are defined in the Custom UI iframe in the product). So what you need to do is to invoke your app as you would normally (e.g - if your app has a Jira issue context module, visit a Jira issue where your app is located), calls will then be proxied to your locally running React dev server.

[shiv]

I am getting error when using forge tunnel or even when app is deployed

import React, { useEffect } from 'react';
import { view } from "@forge/bridge";

function App() {
  useEffect(() => {
    view.theme.enable();
  }, []);

  return <div>Hello</div>;
}

export default App;

1. Build custom UI using “run npm build”
2. forge deploy -e test
3. forge install -e test

My Manifest is

modules:
  sql:
    - key: main
      engine: mysql
  jira:adminPage:
    - key: test-jira-forge-app-admin-page
      resource: admin-page
      title: Test configurations
      resolver:
        function: admin-page-resolver
      displayConditions:
        or:
          isAdmin: true
resources:
   - key: admin-page
    path: resources/admin-config/build

I am getting below error in console

Uncaught n: 
      Unable to establish a connection with the Custom UI bridge.
      If you are trying to run your app locally, Forge apps only work in the context of Atlassian products. Refer to https://go.atlassian.com/forge-tunneling-with-custom-ui for how to tunnel when using a local development server.
    
    at t.getCallBridge (http://localhost:8001/static/js/main.d1ac145b.js:2:19188)

When i abort the tunnel and try to load the app from the server

if i just remove
import { view } from “@forge/bridge”; and
view.theme.enable();
app is loaded without error.

What am i doing wrong?