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/
+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,57 +45,71 @@ const chunkStrs: GetManualChunk = (id, { getModuleInfo }) => {
   }
 };
 
-
 const manualChunks: GetManualChunk = (id, meta) => {
   return chunkStrs(id, meta);
 };
 
-export default defineConfig(({ mode }) => ({
-  plugins: [
-    suid(),
-    solid(),
-    solidStyled({
-      filter: {
-        include: "src/**/*.{tsx,jsx}",
-        exclude: "node_modules/**/*.{ts,js,tsx,jsx}",
-      },
-    }),
-    VitePWA({
-      strategies: "injectManifest",
-      registerType: "autoUpdate",
-      devOptions: {
-        enabled: !["production", "staging"].includes(mode),
-      },
-      srcDir: "src/serviceworker",
-      filename: "main.ts",
-      manifest: manifest,
-      pwaAssets: {
-        config: true,
-      },
-    }),
-    version(),
-  ],
-  server: {
-    https: {
-      // localhost.direct: https://github.com/Upinel/localhost.direct
-      key: "tools/certs/localhost.direct.key",
-      cert: "tools/certs/localhost.direct.crt",
-      passphrase: "localhost",
-    },
-  },
-  define: {
-    "import.meta.env.BUILT_AT": `"${new Date().toISOString()}"`,
-  },
-  css: {
-    devSourcemap: true,
-  },
-  build: {
-    target: ["firefox98", "safari15.4", "ios15.4", "chrome84", "edge87"],
-    sourcemap: true,
-    rollupOptions: {
-      output: {
-        manualChunks,
+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(),
+      solidStyled({
+        filter: {
+          include: "src/**/*.{tsx,jsx}",
+          exclude: "node_modules/**/*.{ts,js,tsx,jsx}",
+        },
+      }),
+      VitePWA({
+        strategies: "injectManifest",
+        registerType: "autoUpdate",
+        devOptions: {
+          enabled: !["production", "staging"].includes(mode),
+        },
+        srcDir: "src/serviceworker",
+        filename: "main.ts",
+        manifest: manifest,
+        pwaAssets: {
+          config: true,
+        },
+      }),
+      version(),
+    ],
+    server: {
+      https: {
+        // This config controls https for the *dev server*.
+        // See docs/dev-https.md for setting up https
+        key: serverHttpCertKey,
+        cert: serverHttpCertCrt,
+        passphrase: serverHttpCertPassword,
       },
     },
-  },
-}));
+    define: {
+      "import.meta.env.BUILT_AT": `"${new Date().toISOString()}"`,
+    },
+    css: {
+      devSourcemap: true,
+    },
+    build: {
+      target: ["firefox98", "safari15.4", "ios15.4", "chrome84", "edge87"],
+      sourcemap: true,
+      rollupOptions: {
+        output: {
+          manualChunks,
+        },
+      },
+    },
+  };
+});