Unable to set clientHost in HMR

[alexyao2015]

Describe the bug

When using GitHub Codespaces, it creates a unique subdomain for each port exposed.

If Vite is running in middleware mode (nuxt 3), it attempts to obtain the hostname using the current location. Setting the hostname would fix this client side, but it would cause vite to attempt to bind to the incorrect host on the server side.

Solution:
There needs to be a clientHost, similar to the clientPort option in server.hmr.

Reproduction

Run vite in middleware mode (using nuxt 3 for example). Create a reverse proxy to the server and one to the hmr server.

System Info

GitHub Codespaces


  System:
    OS: Linux 5.4 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (4) x64 Intel(R) Xeon(R) Platinum 8272CL CPU @ 2.60GHz
    Memory: 3.89 GB / 7.77 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/share/npm-global/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[alexyao2015]

Put simply, I just want to be able to edit __HMR_HOSTNAME__ here without having it affect the listen host on the server side.

I'm currently working around this issue by just editing the transpiled file in node_modules.

[ToolKami]

@alexyao2015 I'm trying to have the same setup on Codespace, can you kindly share your vite config and tips for getting it setup on Codespace? Thanks!

[styts]

I am also experiencing this issue, as well as the one linked in the connected ticket. A clientHost?: string would really help.

My setup is convoluted, but hopefully one can see that the same clientHost is not accessible from my Macbook, as your host (bindHost in the diagram - not the same host that my Macbook would understand)

flowchart LR;
   M[Macbook]
   D[Docker]
   VM[VM]
   N[Nuxt]
V[Vite]
M --> VM
VM --> D
D --> N
N --> V

M -->|browser| N
V -->|bindHost| N
V -->|clientHost| M

Loading

[paweltatarczuk]

Here's a workaround for all of you waiting for a clientHost?: string:

# vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
  {
      name: "client-host",
      transform(code, id) {
        if (
          id.endsWith("dist/client/client.mjs") ||
          id.endsWith("dist/client/env.mjs")
        ) {
          return code.replace(
            "__HMR_HOSTNAME__",
            JSON.stringify("some-other-host")
          );
        }

        return code;
      },
    },
  ],
});

[mmarteauWoop]

@paweltatarczuk 's solution works for me on codespace with Nuxt with this configuration, thank you!

I also had to set forwarded ports on "public" to make it work

export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    plugins: [
      {
        name: "client-host",
        transform(code, id) {
          if (
            id.endsWith("dist/client/client.mjs") ||
            id.endsWith("dist/client/env.mjs")
          ) {
            return code.replace(
              "__HMR_HOSTNAME__",
              JSON.stringify(`${process.env.CODESPACE_NAME}-24678.app.github.dev`)
            );
          }

          return code;
        },
      },
    ],
    server: {
      hmr: {
        protocol: 'wss',
        clientPort: 443
      }
    }
  }
})

[tteggel]

This is what eventually worked for me in GH codespaces. Codespaces doesn't seem to like explicit port numbers in the WS URL, no idea why - the eventual fix will have to take this into consideration too.

Horrid hack, I feel dirty - please make this easier.

const codespaceName = process.env.CODESPACE_NAME
const codespaceDomain = process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN
const port = 3001

export default defineConfig({
  server: { hmr: { port } },
  plugins: [
    {
      name: "client-host",
      transform(code, id) {
        if (id.endsWith("dist/client/client.mjs") || id.endsWith("dist/client/env.mjs")) {
          return code.replace("__HMR_HOSTNAME__", `\"${codespaceName}-${port}.${codespaceDomain}/_build/\"}\`//`)
        }
        return code
      },
    },
  ],
})

[ItsIrv]

To anyone in the future using a Quasar Vue docker service behind Traefik HTTPS: To get HMR to work you will need to enable SSL from the browser through Traefik all the way to Vite.

The "client-host" plugin above can be added to the build.vitePlugins array and remember to enable SSL in extendViteConfig(config.server.https).

There are some other steps required which I can gladly share but will keep out of this thread since it's unrelated. Cheers for the solution.

[bogeeee]

Solution:
There needs to be a clientHost, similar to the clientPort option in server.hmr.

In my use case, i want to set the host to to "127.0.0.1" to bind it to the loopback interface only, for security reasons.
The solution with explicitly specifying the host would not work, cause it's dynamic / window.location.hostName.
So i'd rather like to have a bindHost option and leave host and clientHost undefined.