Add WebSocket support in storybook image

Author: blyme

README.md

@@ -158,6 +158,24 @@ environment:
   NGINX_PROXY_PASS: http://app:6006
 ```
 
+If your're using Vite-based Storybook, you need to add the following lines to
+your viteFinal configuration `.storybook/main.ts`
+
+```typescript
+  async viteFinal(config) {
+    const { mergeConfig } = await import("vite");
+    return mergeConfig(config, {
+      // Existing config...
+      server: {
+        hmr: {
+          clientPort: 443,
+          protocol: "wss",
+        },
+      },
+    });
+  },
+```
+
 ### Drupal
 
 Drupal is a configuration that forwards PHP-FPM requests to a Drupal

context/storybook/etc/nginx/templates/default.conf.template

@@ -1,3 +1,8 @@
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    '' close;
+}
+
 server {
 
     include include.d/ssl.conf;
@@ -9,6 +14,11 @@ server {
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+        # WebSocket support for Vite-based Storybook
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+        proxy_read_timeout 86400;
     }
 
     location /__webpack-hmr {