fix(examples): accept any dev-server host (tailnets, tunnels, LAN)

Vite's default allowedHosts blocks requests arriving under a hostname it doesn't recognize (e.g. a tailnet or tunneled domain), which broke the hub examples and every Storybook dev server reached remotely. Allow any Host header on the example hubs and on all six Storybook configs, and keep ports non-strict so busy ports fall back to the next free one.

Author: antfubot

examples/minimal-vite-devframe-hub/vite.config.ts

@@ -12,6 +12,9 @@ import { minimalViteDevframeHub } from './src/minimal-vite-devframe-hub'
 
 export default defineConfig({
   resolve: { alias },
+  // Dev tooling reached from arbitrary hostnames (LAN IPs, tunnels, tailnets):
+  // accept any Host header and fall back to the next free port when busy.
+  server: { allowedHosts: true, strictPort: false },
   plugins: [
     UnoCSS(),
     minimalViteDevframeHub({

examples/storybook-hub/vite.config.ts

@@ -5,6 +5,10 @@ import { storybookHub } from './src/storybook-hub'
 
 export default defineConfig({
   resolve: { alias },
+  // Dev tooling reached from arbitrary hostnames (LAN IPs, tunnels, tailnets):
+  // accept any Host header and fall back to the next free port when busy.
+  server: { allowedHosts: true, strictPort: false },
+  preview: { allowedHosts: true, strictPort: false },
   plugins: [
     UnoCSS(),
     storybookHub(),

plugins/a11y/.storybook/main.ts

@@ -16,6 +16,9 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       resolve: { alias },
       plugins: [UnoCSS()],
+      // Dev tool reached from arbitrary hostnames (LAN IPs, tunnels,
+      // tailnets), e.g. when iframed by the storybook-hub example.
+      server: { allowedHosts: true },
     })
   },
 }

plugins/code-server/.storybook/main.ts

@@ -10,6 +10,9 @@ const config: StorybookConfig = {
   viteFinal(viteConfig) {
     viteConfig.plugins ??= []
     viteConfig.plugins.push(UnoCSS())
+    // Dev tool reached from arbitrary hostnames (LAN IPs, tunnels, tailnets),
+    // e.g. when iframed by the storybook-hub example: accept any Host header.
+    viteConfig.server = { ...viteConfig.server, allowedHosts: true }
     return viteConfig
   },
 }

plugins/git/.storybook/main.ts

@@ -15,6 +15,9 @@ const config: StorybookConfig = {
     // own; the React plugin wires up the automatic runtime so `.tsx` stories
     // and views parse.
     viteConfig.plugins.push(react(), UnoCSS())
+    // Dev tool reached from arbitrary hostnames (LAN IPs, tunnels, tailnets),
+    // e.g. when iframed by the storybook-hub example: accept any Host header.
+    viteConfig.server = { ...viteConfig.server, allowedHosts: true }
     return viteConfig
   },
 }

plugins/inspect/.storybook/main.ts

@@ -16,6 +16,9 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       resolve: { alias },
       plugins: [vue(), UnoCSS()],
+      // Dev tool reached from arbitrary hostnames (LAN IPs, tunnels,
+      // tailnets), e.g. when iframed by the storybook-hub example.
+      server: { allowedHosts: true },
     })
   },
 }

plugins/terminals/.storybook/main.ts

@@ -19,6 +19,9 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       resolve: { alias },
       plugins: [svelte(), UnoCSS()],
+      // Dev tool reached from arbitrary hostnames (LAN IPs, tunnels,
+      // tailnets), e.g. when iframed by the storybook-hub example.
+      server: { allowedHosts: true },
     })
   },
 }

storybook/.storybook/main.ts

@@ -32,6 +32,8 @@ const config: StorybookConfig = {
   viteFinal(viteConfig) {
     viteConfig.plugins ??= []
     viteConfig.plugins.push(UnoCSS())
+    // Dev tool reached from arbitrary hostnames (LAN IPs, tunnels, tailnets).
+    viteConfig.server = { ...viteConfig.server, allowedHosts: true }
     return viteConfig
   },
 }