feat(dev): add config for websocket connection

[underfin]

close #674, close #676, close #652

[findoff]

Why do not get HMR websocket address and port from browser location by default? In my case, it's make me hardcode external address instead of just specify unix socket and go...

[underfin]

Why do not get HMR websocket address and port from browser location by default? In my case, it's make me hardcode external address instead of just specify unix socket and go...

Yeah.If you not config socketHost and socketPort, it will use that from browser location.

[findoff]

May be i misunderstand something, but i talk in context of my issue #674

If i specify server listening socket as port (it's work because node support that), it's replace client port, and i can prevent it only hardcode valid port with socketPort. I think it's don't close my issue. I think best way add socket opt especially for server listening like webpack.

// src/node/server/serverPluginClient.ts:30 in your commit
.replace(`__PORT__`, (config.socketPort || ctx.port).toString())

and

// src/client/client.ts:40
let socketUrl = `${socketProtocol}://${hostname}:${__PORT__}`

[CantGetRight82]

Any updates on this? This seems to be exactly what I need. I have nginx as a reverse proxy to use domain names (https://somedomain.me).

This PR would allow me to easily specify a different websocket location. (By default it now goes to https://somedomain.me:5001 which would need annoying nginx configuration for the websocket to go through).

[CantGetRight82]

@underfin Sorry to bother you about this again. This seems to be something that should be available to anyone. Do you happen to know a reason why this is not merged into master?

The reason I'm asking is because I need #833 as well. I'm willing to contribute but it almost looks as if some major refactor is on its way that either solves all my problems / would be incompatible with my efforts.

Thanks for your time.

[antfu]

@knightly-bot build this

[knightly-bot]

🌒 Knightly build enabled, release every night at 00:00 UTC ^{(skip if no change)}

📦 npm package

[antfu]

We will have a closer look to see if it's ready to be merged next week.

Before that, I have requested a build for you and you can opt-in and try it in your app now. That would be great if you could have some feedback on this. Thanks.

[CantGetRight82]

@antfu Thanks for getting back to me. I tried the knightly build, and it is almost what I need.

@underfin When using this with for example https://somedomain.me I get it to trying to connect to wss://localhost:5001 which does not work in my case. It would work if it tried ws://localhost:5001 instead.

If we were able to specify the protocol to use as well, that would be great:

export default {
    port: 5001,
    hmr: {
        protocol: 'ws',
        host: 'localhost',
        port: 5001,
        path: '',
    },
}

[underfin]

@CantGetRight82 I refacot code. New option is here.

export interface HmrConfig {
  protocol?: string
  hostname?: string
  port?: number
  path?: string
}

[hxgqh]

Any updates on this? This seems to be exactly what I need. I have nginx as a reverse proxy to use domain names (https://somedomain.me).

This PR would allow me to easily specify a different websocket location. (By default it now goes to https://somedomain.me:5001 which would need annoying nginx configuration for the websocket to go through).

Do you succeed to proxy vite behind nginx?

[CantGetRight82]

@hxgqh

I do succeed to proxy but not without additional nginx config:

    location /wsdev/ {
        proxy_pass http://localhost:5001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }

And then in vite.config.js:

    hmr: {
        protocol: 'wss',
        host: 'somedomain.me',
        port: 443,
        path: 'wsdev/',
    },

Best of luck!

[ebeloded]

Hey friends. I see that this PR closed the issue #652 and a related issue #797. Does it mean that it is possible to run Vite app with HMR in GitHub Codespaces? I've been trying to make it work, but to no avail. Can someone clarify, how to configure Vite to make it work, please?

[mbarton]

@ebeloded Here's the configuration I've used in case it's useful:

const codespaceName = process.env['CODESPACE_NAME'];
const hmrPort = 24678;

const hmrRemoteHost = codespaceName ? `${codespaceName}-${hmrPort}.githubpreview.dev` : 'localhost';
const hmrRemotePort = codespaceName ? 443 : hmrPort;

// then in the config...

hmr: {
  host: hmrRemoteHost,
  port: hmrPort,
  clientPort: hmrRemotePort
}

[TomCaserta]

I know this isn't the best place for this discussion but this is first result on Google. Thanks @mbarton as this works! I found I had to go to https://<codespace-url>-24678.githubpreview.dev/ and go through the Github redirect before it worked fully (prior to that the connection was getting refused and causing a constant reload of the page) - not perfect but it's something.

[jacob-8]

https://<codespace-url>-24678.githubpreview.dev/ and go through the Github redirect

I'm getting a simple text response "Upgrade Required" when I try doing this.

I added @mbarton code to my Vite config with no success (in the context of SvelteKit). I can make changes and refresh the page to get updated results just fine when I use the regular preview url at https://<codespace-url>-3051.githubpreview.dev/, but no HMR.

[Niputi]

@jacobbowdoin and @TomCaserta please open a new issue with a reproduction if you experience problems with websocket connection. this pull request was for vite version 1

[ishowman]

@ebeloded Here's the configuration I've used in case it's useful:

const codespaceName = process.env['CODESPACE_NAME'];
const hmrPort = 24678;

const hmrRemoteHost = codespaceName ? `${codespaceName}-${hmrPort}.githubpreview.dev` : 'localhost';
const hmrRemotePort = codespaceName ? 443 : hmrPort;

// then in the config...

hmr: {
  host: hmrRemoteHost,
  port: hmrPort,
  clientPort: hmrRemotePort
}

Thanks.By the way, you need to specify port using vite --port 24678, or it will cause a new error when run dev script of package.json:

WebSocket server error:
Error: listen EADDRNOTAVAIL: address not available 20.195.18.28:24678
    at Server.setupListenHandle [as _listen2] (node:net:1314:21)
    at listenInCluster (node:net:1379:12)
    at GetAddrInfoReqWrap.doListen [as callback] (node:net:1518:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:74:8)

[jbreuer95]

vite.config.js

import { defineConfig } from 'vite';

const codespaceName = process.env['CODESPACE_NAME'];
const codespaceDomain = process.env['GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN'];
const hmrPort = 5173;

const hmrRemoteHost = codespaceName ? `${codespaceName}-${hmrPort}.${codespaceDomain}` : 'localhost';
const hmrRemotePort = codespaceName ? 443 : hmrPort;
const hmrRemoteProtocol = codespaceName ? 'wss' : 'ws';

export default defineConfig({    
    server: {
        hmr: {
            protocol: hmrRemoteProtocol,
            host: hmrRemoteHost,
            port: hmrPort,
            clientPort: hmrRemotePort
        }
    },
    // etc
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite --host 0.0.0.0 --port 5173",
        "build": "vite build"
    },
   // etc
}

Last step is to set 5173 to PUBLIC in the codespace, else you will get a CORS error. Unfornulately you cannot specify this in the .devcontainer