vite (start): Enable httpsDevServer config option (#1227)

Co-authored-by: Dan Drory <[email protected]>

Author: williamlark

.changeset/stupid-onions-speak.md

@@ -0,0 +1,5 @@
+---
+'sku': minor
+---
+
+`vite (start)`: Enable `httpsDevServer` config option

fixtures/sku-with-https/package.json

@@ -2,6 +2,10 @@
   "name": "@sku-fixtures/sku-with-https",
   "private": true,
   "type": "module",
+  "scripts": {
+    "start": "sku start",
+    "start:vite": "sku start --experimental-bundler --config sku.config.vite.mjs"
+  },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

fixtures/sku-with-https/sku.config.vite.mjs

@@ -3,6 +3,5 @@ import baseConfig from './sku.config.mjs';
 export default {
   ...baseConfig,
   __UNSAFE_EXPERIMENTAL__bundler: 'vite',
-  httpsDevServer: false, // not yet supported
   devServerMiddleware: './dev-middleware.vite.js',
 };

packages/sku/package.json

@@ -106,6 +106,7 @@
     "@vanilla-extract/jest-transform": "^1.1.0",
     "@vanilla-extract/vite-plugin": "^5.0.1",
     "@vanilla-extract/webpack-plugin": "^2.2.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-react-swc": "^3.8.0",
     "@vocab/core": "^1.6.2",
     "@vocab/phrase": "^2.0.1",

packages/sku/src/services/vite/helpers/server/createViteServer.ts

@@ -5,6 +5,8 @@ import type { SkuContext } from '@/context/createSkuContext.js';
 import { createViteConfig } from '../createConfig.js';
 import skuViteHMRTelemetryPlugin from '@/services/vite/plugins/skuViteHMRTelemetry.js';
 import { skuViteStartTelemetryPlugin } from '../../plugins/skuViteStartTelemetry.js';
+import { getAppHosts } from '@/utils/contextUtils/hosts.js';
+import { skuViteHttpsDevServer } from '../../plugins/skuViteHttpsDevServer.js';
 
 export const createViteServer = async (skuContext: SkuContext) => {
   const base = process.env.BASE || '/';
@@ -22,12 +24,14 @@ export const createViteServer = async (skuContext: SkuContext) => {
           target: 'node',
           type: 'static',
         }),
+        skuContext.httpsDevServer && skuViteHttpsDevServer(skuContext),
       ],
     }),
     server: {
-      allowedHosts: skuContext.sites
-        .map(({ host }) => host || false)
-        .filter((host) => typeof host === 'string'),
+      host: 'localhost',
+      allowedHosts: getAppHosts(skuContext).filter(
+        (host) => typeof host === 'string',
+      ),
     },
     base,
   });

packages/sku/src/services/vite/helpers/server/createViteServerSsr.ts

@@ -10,6 +10,8 @@ import type { SkuContext } from '@/context/createSkuContext.js';
 
 import { createSsrHtml } from '@/services/vite/helpers/html/createSsrHtml.js';
 import { createCollector } from '@/services/vite/loadable/collector.js';
+import { getAppHosts } from '@/utils/contextUtils/hosts.js';
+import { skuViteHttpsDevServer } from '../../plugins/skuViteHttpsDevServer.js';
 
 const base = process.env.BASE || '/';
 
@@ -42,12 +44,16 @@ export const createViteServerSsr = async ({
           configType: 'ssr',
         }),
         server: {
+          host: 'localhost',
           middlewareMode: true,
           hmr: true,
-          allowedHosts: skuContext.sites
-            .map(({ host }) => host || false)
-            .filter((host) => typeof host === 'string'),
+          allowedHosts: getAppHosts(skuContext).filter(
+            (host) => typeof host === 'string',
+          ),
         },
+        plugins: [
+          skuContext.httpsDevServer && skuViteHttpsDevServer(skuContext),
+        ],
         appType: 'custom',
         base,
       });

packages/sku/src/services/vite/index.ts

@@ -8,6 +8,7 @@ import { prerenderRoutes } from './helpers/prerenderRoutes.js';
 import { cleanTargetDirectory } from '@/utils/buildFileUtils.js';
 import { openBrowser } from '@/openBrowser/index.js';
 import { getAppHosts } from '@/utils/contextUtils/hosts.js';
+import chalk from 'chalk';
 
 export const viteService = {
   buildSsr: async (skuContext: SkuContext) => {
@@ -33,15 +34,8 @@ export const viteService = {
     const url = `${proto}://${hosts[0]}:${skuContext.port.client}${skuContext.initialPath}`;
     openBrowser(url);
 
-    if (skuContext.sites.length > 1) {
-      skuContext.sites.forEach((site) => {
-        console.log(
-          `Running ${site.name} on '${proto}://${site.host ?? 'localhost'}:${skuContext.port.client}'`,
-        );
-      });
-    } else {
-      server.printUrls();
-    }
+    printUrls(hosts, skuContext);
+
     server.bindCLIShortcuts({ print: true });
   },
   startSsr: async (skuContext: SkuContext) => {
@@ -57,14 +51,18 @@ export const viteService = {
     const url = `${proto}://${hosts[0]}:${skuContext.port.server}${skuContext.initialPath}`;
     openBrowser(url);
 
-    if (skuContext.sites.length > 1) {
-      skuContext.sites.forEach((site) => {
-        console.log(
-          `Running ${site.name} on '${proto}://${site.host ?? 'localhost'}:${skuContext.port.server}'`,
-        );
-      });
-    } else {
-      console.log(`Running on 'http://localhost:${skuContext.port.server}'`);
-    }
+    printUrls(hosts, skuContext);
   },
 };
+
+const printUrls = (
+  hosts: Array<string | undefined>,
+  skuContext: SkuContext,
+) => {
+  const proto = skuContext.httpsDevServer ? 'https' : 'http';
+  hosts.forEach((site) => {
+    console.log(
+      `${chalk.green('➜')}  ${chalk.bold('Local')}: ${chalk.cyan(`${proto}://${site}:${chalk.bold(skuContext.port.client)}`)}`,
+    );
+  });
+};

packages/sku/src/services/vite/plugins/skuViteHttpsDevServer.ts

@@ -0,0 +1,47 @@
+import type { SkuContext } from '@/context/createSkuContext.js';
+import { getAppHosts } from '@/utils/contextUtils/hosts.js';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+import path from 'node:path';
+import type { Plugin } from 'vite';
+import { promises as fs } from 'node:fs';
+import debug from 'debug';
+import { hasErrorCode } from '@/utils/error-guards.js';
+
+const log = debug('sku:vite:https');
+
+/**
+ * Cleans up stale certs from the cert directory. This is useful when the user changes their hosts in their sku config and the old certs are no longer needed.
+ */
+const cleanupStaleCerts = (certDir: string): Plugin => ({
+  name: 'sku:cleanup-stale-certs',
+  // We want to call this before the ssl generation which happens in the "configResolved" hook. However, adding a "enfore:pre" flag in "configResolved"
+  // doesn't guarantee that it will delete the certs before the ssl generation since it's called async and in parallel.
+  // So, we use the "config" hook which is guaranteed to be called and waited on before the "configResolved" hook.
+  config: {
+    async handler() {
+      try {
+        await fs.rm(certDir, { recursive: true });
+        log(`Removed stale certs from ${certDir}`);
+      } catch (e) {
+        if (hasErrorCode(e) && e.code === 'ENOENT') {
+          log(`Failed removing stale certs. Directory not found: ${certDir}`);
+          return;
+        }
+
+        log(`Failed to remove stale certs from ${certDir}`, e);
+      }
+    },
+  },
+});
+
+export const skuViteHttpsDevServer = async (skuContext: SkuContext) => {
+  const certDir = path.join(process.cwd(), '.ssl');
+
+  return [
+    cleanupStaleCerts(certDir),
+    basicSsl({
+      domains: getAppHosts(skuContext).filter((host) => host !== undefined),
+      certDir,
+    }),
+  ];
+};

packages/sku/src/services/vite/plugins/skuViteMiddlewarePlugin.ts

@@ -45,7 +45,10 @@ export const skuViteMiddlewarePlugin = (skuContext: SkuContext): Plugin => ({
         next();
         return;
       }
-      const host = req.headers.host;
+
+      // `host` header is available in vite http requests. `:authority` pseudo-header is available in vite https requests. `:authority` is used in HTTP/2.
+      // @see https://stackoverflow.com/questions/70502726/what-is-the-purpose-of-http2-pseudo-headers-authority-method
+      const host = req.headers.host ?? (req.headers[':authority'] as string);
       const hostname = host?.split(':')[0];
 
       if (!hostname) {

pnpm-lock.yaml

@@ -5,13 +5,7 @@ export const waitForUrls = async (...urls) => {
 
   try {
     return await waitOn({
-      resources: urls.map((url) =>
-        url
-          .replace(/http(s?)\:/, 'http$1-get:')
-          // As of node 17, ipv6 is preferred, so explicitly use ipv4
-          // See https://github.com/jeffbski/wait-on/issues/133
-          .replace(/localhost/, '0.0.0.0'),
-      ),
+      resources: urls.map((url) => url.replace(/http(s?)\:/, 'http$1-get:')),
       headers: { accept: 'text/html, application/javascript' },
       timeout,
       // Log output of wait behaviour timing to allow

test-utils/waitForUrls.js

@@ -25,7 +25,7 @@ describe('sku-with-https', () => {
         ? ['--experimental-bundler', '--config', 'sku.config.vite.mjs']
         : [];
     describe('start', () => {
-      const url = `http${bundler === 'vite' ? '' : 's'}://${bundler === 'vite' ? '[::1]' : 'localhost'}:${port}`;
+      const url = `https://localhost:${port}`;
 
       let process;