node-custom-server trying to implement https / ssl in DEV mode with no luck

[drscottlobo]

Good day! I've got a working version of the node-custom-server up and running, it's great!

But I need to have https/ssl over localhost for my app in development. I have set up https with self-signed certificates using express in the past like the following:

https.createServer(
	{
		key: fs.readFileSync("./certificates/localhost-key.pem"),
		cert: fs.readFileSync("./certificates/localhost.pem"),
	},
	app
	).listen(port, function () {
		console.log("Listening on Port 8000. https://localhost:8000/");
	});

But trying something similar with the vite server setup in the node-custom-server template doesn't seem to work, at least not the way I've tried it. I've tried using @vitejs/plugin-basic-ssl in the vite.config.ts like this:

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import basicSsl from "@vitejs/plugin-basic-ssl";

export default defineConfig(({ isSsrBuild }) => ({
	build: {
		rollupOptions: isSsrBuild
			? {
					input: "./server/app.ts",
			  }
			: undefined,
	},
	plugins: [reactRouter(), tsconfigPaths(), basicSsl()],
}));

As well as tried to add my self-signed certificates from mkcert in the template's server.js file as an option within the vite.createServer call:

const viteDevServer = await import("vite").then((vite) =>
vite.createServer({
		server: {
			middlewareMode: true,
			https: {
				key: fs.readFileSync("./cert/localhost-key.pem"),
				cert: fs.readFileSync("./cert/localhost.pem"),
			},
		},
	})
);

None of these seem to be working? I feel like it's probably something simple I'm missing, and I've looked at the vite docs as well, but no clear answer when using the createServer function.

I would really appreciate any help in this regard, as I am loving the new react-router 7 framework!