Vite + Express + HTTPS not working

[gustavopch]

Did anyone have success using Vite + Express + HTTPS? I'm looking for some code I can use as reference.

My HTTPS configuration that worked without Vite doesn't seem to be compatible with Vite. The browser can't find the dev server and this happens:

Would be nice to have that in the docs too and maybe even in https://github.com/remix-run/remix/tree/main/templates or https://github.com/remix-run/examples.

[hi-ogawa]

I started from the official unstable-vite-express template and experimented with https here https://github.com/hi-ogawa/test-remix-vite-express-https.
I think I made it work both dev (with hmr) and build + start (though I'm not particularly experience with using https locally, so I might have missed something).
I hope it helps!
If something still doesn't work, I would appreciate if you can share more details about your setup.

[gustavopch]

I ended up doing the same as you did: configuring key and cert both in the server file and in the Vite config. It seems to work!

[hi-ogawa]

Just FYI, there was a new insight regarding custom server and https setup.
You won't need extra server.https.key/cert config on vite side if you instantiate vite middleware in the following way:

import https from "node:https";
import { createServer } from "vite";

const server = https.createServer(
  {
    key: fs.readFileSync("localhost-key.pem"),
    cert: fs.readFileSync("localhost.pem"),
  },
  app
);

let vite = await createServer({
  server: {
    middlewareMode: true,
    hmr: {
      server,        // <=========  user `server.hmr.server`
    }
  }
})

See details in here #8095