Unable to connect to local react app from forge tunnel

Forge
1

Hi,

I’ve created sample Forge app with Custom UI ( written in React). I’m trying to use standard flow:

  • defining tunnel attribute for resource module
resources:
  - key: main
    path: static/my-app/build
    tunnel:
      port: 3000
  • Executing the react app on the first terminal window : npm run start
  • Executing forge tunnel command in the second terminal window in order to route all traffic from the app to local computer

Unfortunately the “forge tunnel” command is not able to connect to the react app (localhost:3000).

Received proxy request. Serving file index.html for resource main from specified address http://localhost:3000

Error: Failed to connect to localhost:3000. Check that your service is running.

I’ve checked that the server is running using curl http://localhost:3000 and is working. Does anyone know what might be the reason ?

As far as I understand Docker, running container is isolated from the host and he doesn’t have access to the “localhost” network interface on the host machine, so how this proxy is able to work ?

2

Hey @TReb! Thanks for raising this issue with us. I see this is your first time posting in our community, so welcome!

Could you please provide us with a bit more information about the environment that you are running?

  • What node version are you using?

  • What forge-cli version are you using?

  • What platform and OS are you using?

  • What type of app are you deploying and to where are you trying to deploy it to?

I’d also like to quickly confirm that you have successfully deployed and installed your app into a site prior to starting the app locally and running forge tunnel.

Could you also please provide a screenshot of the manifest.yml you have.

This will help us understand the problem and hopefully get it fixed. Thank you!

3

Hi,

I’m using:

  • Ubuntu 20.04.3 LTS
  • Nodejs version : v16.13.0
  • Forge CLI : 2.0.6
  • Forge app with Custom UI as a Jira plugin

I’ve successfully deploy and install app on the development environment :

  • forge deploy -e development
  • forge install -e development -p Jira

After deploying and installing application is displayed on the Jira Project page ( with a dev tag) so I assume that installation is successful.

I’ve tried to execute the app on the Jira page and here are the results :

  • using “forge tunnel” without tunneling resources to the external server ( tunnel:port conf for resource module in the manifest.yml file) - working fine
  • using “forge tunnel” with tunneling to the local server (localhost:3000) - not working
  • trying to ope the plugin page on the Jira page without tunneling - not working - I see that CDN is returning 403 code (forbidden) so the browser is not able to download the content

manifest.yml

modules:
  jira:projectPage:
    - key: sample-forge-app-hello-world-project-page
      resource: main
      resolver:
        function: resolver
      title: 'Sample app'
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/my-app/build
    tunnel:
      port: 3000
app:
  id: ari:cloud:ecosystem::app/{id}
permissions:
  content:
    scripts:
      - 'unsafe-inline'
      - 'unsafe-eval'
    styles:
      - 'unsafe-inline'
4

First make sure you’re using Chrome.

Secondly, I’ve had a similar issue due to an issue with forge tunnel for custom ui uncompressing the html resources from the tunneled location but keeping the headers the same (ie sending uncompressed html but saying it’s compressed).

The fix in my case is to disable compression in the web pack dev server by setting:
compress:false;

in node_modules/react-scripts/config/webpackDevServer.config.js .

Don’t know if either one solves it for you.

5

Thanks for the reply, I’ve checked this solution and unfortunately, doesn’t work.

I’m not sure how it should work, because tunnel is created in the docker container which is an isolated environment without access to the host local network interface directly. I also used docker exec command in order to get in to the running container and I don’t see any 3000 port opened. As far as I understood this solution, in normal forge tunnel (without tunneling to the local server) local folder is attached to the docker container and the server started in the container is serving the content from this folder on the 8002 port exposed to the host and all requests created in the running plugin from the browser are sent to the localhost:8002, but is magic for me how it should work with redirection to the host localhost

6

Hi @TReb,
could you find a solution in the meantime?

I’m experiencing the same issue:

  • I transferred a (running) Confluence Custom-UI macro from the Windows environment (where forge tunnel works) to Ubuntu.
  • When I use the npm start inside the static part the localhost:3000 is running as defined.
  • Only inside forge tunnel (and the browser) the error appears: “Failed to connect to localhost:3000”
    ( I’m using also Chrome; compress:false; doesn’t have any effect)
7

Hi @FranzBinder

I couldn’t figure out what is going on so I started implementing the app using classic approach ( connect app) instead of forge. I’ve returned back to this subject recently just to check if maybe this issue has been solved, but none found the solution ( at least none wrote about it). I’ve started some digging and I discovered that the issue is in the Docker (at least on my computer).
What is the issue:

forge cli is adding an additional param during executing Docker container : “–add-host host.docker.internal:host-gateway” which should “grant” the access to the host network layer. But Docker is not mapping “host-gateway” correctly thus the service exposed on the host can’t be reach out from the docker container. I haven’t found yet the root cause or configuration responsible for this mapping but if wanted to apply a quick and dirty solution for this issue the you can edit the following file :

/home/tomasz/.nvm/versions/node/v16.16.0/lib/node_modules/@forge/cli/out/service/tunnel-service.js

there will be a line :

const addHostOption = os_1.default.platform() === 'linux' ? ['--add-host', 'host.docker.internal:host-gateway'] : [];

you need to replace : host-gateway with the your ip address ( from the ipconfig) and should work. Of course it is not a best option, when you update the forge cli or the ip will be change, you will have to update it again.

If I will find some spare time I will to found a better solution or maybe someone else has already figure out how to solve it