Error during nx serve: Failed to connect to localhost:3000

[vladnega]

Hi there! 👋

I'm having issues when running nx serve <forge_app_name> in my Forge Custom UI setup. The app manages to initialize forge tunneling just fine (it eventually says Listening for requests on local port 36975...), however when I refresh the page in Jira it throws the following error:

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

Error: Failed to connect to localhost:3000. Check that your service is running.
    at CustomUITunnelServer.handleProxyDestinationNotStarted (/tunnel/node_modules/@forge/tunnel/out/servers/custom-ui-tunnel-server.js:90:27)
    at ProxyServer.onError (/tunnel/node_modules/@forge/tunnel/out/servers/custom-ui-tunnel-server.js:41:26)
    at ProxyServer.emit (/tunnel/node_modules/eventemitter3/index.js:210:27)
    at ClientRequest.proxyError (/tunnel/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:165:18)
    at ClientRequest.emit (events.js:412:35)
    at ClientRequest.emit (domain.js:475:12)
    at Socket.socketErrorListener (_http_client.js:475:9)
    at Socket.emit (events.js:400:28)
    at Socket.emit (domain.js:475:12)
    at emitErrorNT (internal/streams/destroy.js:106:8)
    at emitErrorCloseNT (internal/streams/destroy.js:74:3)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)

I followed the Getting started tutorial, so my forge app's project.json looks something like this:

"targets": {
    ...
    "serve": {
      "executor": "@toolsplus/nx-forge:tunnel",
      "options": {
        "outputPath": "dist/apps/<forge_app_name>",
        "debug": true,
        "verbose": true
      }
    },
    ...
}

My custom UI app project.json looks like this:

"targets": {
    ...
    "targets": {
    ...
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "dist/apps/<custom_ui_app>",
        "index": "apps/<custom_ui_app>/src/index.html",
        "main": "apps/<custom_ui_app>/src/main.tsx",
        "tsConfig": "apps/<custom_ui_app>/tsconfig.app.json",
        "assets": [
          "apps/<custom_ui_app>/src/favicon.ico",
          "apps/<custom_ui_app>/src/assets"
        ],
        "styles": [],
        "scripts": [],
        "webpackConfig": "apps/<custom_ui_app>/webpack.config.js"
      },
      "configurations": {
        "development": {
          "extractLicenses": false,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        },
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/<custom_ui_app>/src/environments/environment.ts",
              "with": "apps/<custom_ui_app>/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false
        }
      }
    },
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "<custom_ui_app>:build",
      },
      "configurations": {
        "development": {
          "buildTarget": "<custom_ui_app>:build:development"
        },
        "production": {
          "buildTarget": "<custom_ui_app>:build:production",
          "hmr": false
        }
      }
    }
  }

My manifest.json has the following resource setup:

resources:
  - key: main
    path: <custom_ui_app>
    tunnel:
      port: 3000

I am not getting any issues when following the Forge Custom UI tutorial and trying to tunnel. I am using a Windows 11 machine.

Could you please help?

Thanks, Vladimir

[vladnega]

After a lot of tinkering, I eventually found that setting the host to 0.0.0.0 in my Custom UI App's project.json when calling @nx/webpack-dev-server fixes the issue for me, being on a Windows machine. I am not sure if this is something you might want to include in your docs, @tbinna, so I'll leave you to decide what to do with this information.

"serve": {
  "executor": "@nx/webpack:dev-server",
  "defaultConfiguration": "development",
  "options": {
    "buildTarget": "<custom_ui_app>:build",
    "host": "0.0.0.0"
  },
  "configurations": {
    "development": {
      "buildTarget": "<custom_ui_app>:build:development"
    },
    "production": {
      "buildTarget": "<custom_ui_app>:build:production",
      "hmr": false
    }
  }
}