I'm trying to bring my KVision site to 'production...

# kvision

[Adam S]

I'm trying to bring my KVision site to 'production' and I need to remove the hardcoded websocket URL. I've managed to derive the correct websocket URL from modifying window.location.href, but now I need to set up some sort of 'proxy' so I can connect when developing locally

I've tried using the dev server option in build.gradle.kts

// build.gradle.kts
...
          proxy = mutableMapOf(
            "/ws" to mapOf(
              "target" to "<http://localhost:12080>",
              "secure" to false,
              "ws" to true,
              "changeOrigin" to true,
            ),
          ),

but I get an error in the application logs

<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET
<e>     at TCP.onStreamRead (node:internal/stream_base_commons:220:20) {
<e>   errno: -4077,
<e>   code: 'ECONNRESET',
<e>   syscall: 'read'
<e> }

In the browser it tries to connect, but gets an Invalid frame header error.

I saw that the KVision examples set up websockets proxys, but they look the same as what I have. What else do I need?

KVision 5.10.1, Kotlin/JS 1.7.0, more details here

[Robert Jaros]

In my websocket projects I have "target" to "<ws://localhost:8080>" and not http://...

[Robert Jaros]

https://github.com/rjaros/kvision-examples/blob/master/tweets-fullstack-ktor/build.gradle.kts#L59

[Adam S]

thanks, but there's no change :( Same problem happens

> Task :modules:web-map:browserDevelopmentRun
<i> [webpack-dev-server] [HPM] Proxy created: /tiles  -> <http://localhost:12080>
<i> [webpack-dev-server] [HPM] Proxy created: /ws  -> <ws://localhost:12080>
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: <http://localhost:3000/>
<i> [webpack-dev-server] On Your Network (IPv4): <http://192.168.178.59:3000/>
<i> [webpack-dev-server] Content not from webpack is served from '...\web-map\build/processedResources/js/main' directory
<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET
<e>     at TCP.onStreamRead (node:internal/stream_base_commons:220:20) {
<e>   errno: -4077,
<e>   code: 'ECONNRESET',
<e>   syscall: 'read'
<e> }

[Adam S]

kotlin {
  js(IR) {
    browser {
      runTask {
        outputFileName = "main.bundle.js"
        sourceMaps = false
        devServer = KotlinWebpackConfig.DevServer(
          open = false,
          port = 3000,
          proxy = mutableMapOf(
            "/tiles" to mapOf(
              "target" to "<http://localhost:12080>",
              "secure" to false,
              "changeOrigin" to true,
            ),
            "/ws/*" to mapOf(
              "target" to "<ws://localhost:12080>",
//              "secure" to false,
              "ws" to true,
//              "changeOrigin" to true,
            ),
          ),
          static = mutableListOf("$buildDir/processedResources/js/main")
        )
      }
      webpackTask {
        outputFileName = "main.bundle.js"
      }
      testTask {
        useKarma {
          useChromeHeadless()
        }
      }
    }
    binaries.executable()
  }

[Robert Jaros]

Perhaps /ws/* doesn't include /ws

[Adam S]

this might be fixed by http-proxy-middleware@2.0.6? https://github.com/webpack/webpack-dev-server/issues/1642#issuecomment-1104408012

I don't know how to override that version though

[Adam S]

I've tried /ws, /ws/, /ws/*... no change

[Robert Jaros]

Have you tried changing the websocket url to something like /ws/foo and then check /ws/* in webpack proxy?

[Robert Jaros]

The webpack proxy works fine for me.

[Robert Jaros]

[Robert Jaros]

Perhaps there is something wrong with your backend running standalone? Like forced redirect to https?

[Robert Jaros]

Have to go now, I'll be back tomorrow if you still need help.

[Adam S]

huh weird, it looks like this stops the error

"/ws/foo" to mapOf(
              "target" to "<ws://localhost:12080>",
//              "secure" to false,
              "ws" to true,
//              "changeOrigin" to true,
            ),

websocker server is up at <ws://localhost:12080/ws/foo>, the browser is pointing to <ws://localhost:3000/ws/foo>

I'm not getting any data, but that might be a bug on the websocket server side (coroutines are confusing)

[Adam S]

thanks very much Robert - I'll let you know if I can resolve it