Please improve config documentation for server.hmr.server

[FullStackAlex]

Clear and concise description of the problem

In https://vitejs.dev/config/#server-hmr it is said:

When using server.middlewareMode or server.https, assigning server.hmr.server to your HTTP(S) server will process HMR connection requests through your server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port.

But it's unclear and nowhere else described what "assigning server.hmr.server to your HTTP(S) server" would look like in the actual config file.

Suggested solution

Please add a code snippet of the actual final configuration:

server: {
    host: true,
    port: 8015,
    https: true,    
    hmr:{
         server: what are the options and syntax here?
    }
  }
}

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[FullStackAlex]

Why have you downvoted the request, @bluwy ? What's wrong with it?

[bluwy]

I think it's just something tricky to document. The types had shown that it's of NodeJS Server type, which you can create or start of with require('http').createServer(), but we can't just use that as an example because it doesn't reflect:

This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port.

And if we want to do a full example, it would take a big portion of the page for a niche usecase. Hence, I feel like this issue would be stale for months.

This is just a pet peeve of mine 😬 I'd usually prefer documentation suggestions to be submitted as PRs directly and discuss from there onwards.

[FullStackAlex]

@bluwy Thanx for the explanation and pointing in the right direction with require('http').createServer(). But how is this a niche usecase? Everyone who is developing full-stack apps which contains any kind of user interaction with the application's backend (ecommerce or forms) and is using docker for development is affected...

Also after googling "node self signed createServer" the first result offered some snippets which made my config finally work. And the required code example for the docs isn't huge at all:

openssl genrsa -out key.pem
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
rm csr.pem

const https = require('https');
const fs = require('fs');

const options = {
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem')
};
const HttpsServer = https.createServer(options, function (req, res) {});
export default defineConfig({
  plugins: [vue()],
  server: {
    //https://github.com/vitejs/vite/discussions/3396
    host: true,
    port: 8015,
    https: true,
    hmr:{
      server: HttpsServer
    }
  }
})

[Shinigami92]

Everyone [...] developing full-stack apps + user interaction with application's backend + using docker

IMO this already counts as niche

First result of google "node self signed createServer" [...]

I think you answered yourself why we didn't yet considered to document it as that important :thinking: You found an answer so fast? If I would ask for documenting every single config combination, then the docs would explode in size.

[FullStackAlex]

I am not a node developer and I bet most of the vue.js developers aren't. So why you assume every vite user has to know node.js? I write my backends in PHP.

[FullStackAlex]

Ok, then I will stick with webpack and suggest to anybody I know to do the same due to rude and careless vite community.

[FullStackAlex]

By the way I've spent whole or at least half of a day searching through the vite node module trying to find the right syntax and available options for server.hmr.server. Without bluwy's suggestions I wouldn't be able to solve this problem. And I develop vue.js apps for 4 years and JavaScript stuff in general for 6-7 years. I don't get why you have to be so arrogant and ignorant.

[Niputi]

please give constructive feedback instead of being hostile. in my head I remember us having several issues related to docker which could justify having a docker section

[FullStackAlex]

I've gave you constructive feedback. You downvoted it and considered fullstack dev needs as a niche. WTF?

[Niputi]

please continue being constructive. writing hostile comments doesn't make a good community

[FullStackAlex]

Not caring about legit usecases outsite your personal experience area and being cynical doesn't make a good community neither.

[patak-dev]

@Tech-Nomad I'm sorry you felt that your suggestion wasn't taken into account, but the fact that two maintainers took the time to read through your issue and evaluate if the docs should be extended or not should show you that it isn't the case. As they explained already, the Vite documentation can't contain an explanation for all possible use cases. We need to work with other communities so they include sections about Vite for example to be able to scale. Closing this issue now as I don't think this discussion is constructive. You are free to use other tools if they work better for you.