vite: add https variables

Personal note from Rubicon: I am unware that I
originally put the localhost.direct cert files
into the repository. All reference to the files
are now removed.

Sorry for the inconvenience.

.env

@@ -0,0 +1,2 @@
+DEV_SERVER_HTTPS_CERT_BASE=
+DEV_SERVER_HTTPS_CERT_PASS=

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 dist/
 dev-dist/
+.env.local
+.env.*.local

docs/dev-https.md

@@ -0,0 +1,27 @@
+# Set up HTTPS for the dev server
+
+With a valid HTTP server, you can let the other devices access your dev server, with features only available to HTTPS.
+
+You can use [localhost.direct](https://get.localhost.direct) certificate for set up local HTTPS server. Any vaild certificate is also allowed.
+
+Download the certs and unpack them. In this document we put them under "tools/cert/".
+
+Create or edit the file ".env.local", this file is ignored by git. Copy the content from ".env":
+
+```env
+DEV_SERVER_HTTPS_CERT_BASE=
+DEV_SERVER_HTTPS_CERT_PASS=
+```
+
+The `DEV_SERVER_HTTPS_CERT_BASE` is the basename for your cert. The cert includes two files to work: one's suffix is `.key`, the other is `.crt`. The base is the common part of them.
+
+If you have files "tools/cert/localhost.direct.key" and "tools/cert/localhost.direct.crt", the value you need is "tools/cert/localhost.direct".
+
+The `DEV_SERVER_HTTPS_CERT_PASS` is the password to unlock the key. For the localhost.direct, it's `password`.
+
+Here is an example:
+
+```env
+DEV_SERVER_HTTPS_CERT_BASE=tools/cert/localhost.direct
+DEV_SERVER_HTTPS_CERT_PASS=localhost
+```

vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import solid from "vite-plugin-solid";
 import solidStyled from "vite-plugin-solid-styled";
 import suid from "@suid/vite-plugin";
@@ -45,12 +45,24 @@ const chunkStrs: GetManualChunk = (id, { getModuleInfo }) => {
   }
 };
 
-
 const manualChunks: GetManualChunk = (id, meta) => {
   return chunkStrs(id, meta);
 };
 
-export default defineConfig(({ mode }) => ({
+export default defineConfig(({ mode }) => {
+  const devConf = loadEnv(mode, import.meta.dirname, "DEV");
+
+  const serverHttpCertBase = devConf["DEV_SERVER_HTTP_CERT_BASE"];
+  const serverHttpCertPassword = devConf["DEV_SERVER_HTTP_CERT_PASS"];
+
+  const serverHttpCertKey = serverHttpCertBase
+    ? `${serverHttpCertBase}.key`
+    : undefined;
+  const serverHttpCertCrt = serverHttpCertBase
+    ? `${serverHttpCertBase}.crt`
+    : undefined;
+
+  return {
     plugins: [
       suid(),
       solid(),
@@ -77,10 +89,11 @@ export default defineConfig(({ mode }) => ({
     ],
     server: {
       https: {
-      // localhost.direct: https://github.com/Upinel/localhost.direct
-      key: "tools/certs/localhost.direct.key",
-      cert: "tools/certs/localhost.direct.crt",
-      passphrase: "localhost",
+        // This config controls https for the *dev server*.
+        // See docs/dev-https.md for setting up https
+        key: serverHttpCertKey,
+        cert: serverHttpCertCrt,
+        passphrase: serverHttpCertPassword,
       },
     },
     define: {
@@ -98,4 +111,5 @@ export default defineConfig(({ mode }) => ({
         },
       },
     },
-}));
+  };
+});