From 162b2e95c7a7ced901a2217d34ffa8a870fb53e0 Mon Sep 17 00:00:00 2001
From: Mikkel Blyme <blymemikkel@protonmail.com>
Date: Thu, 4 Dec 2025 14:12:00 +0100
Subject: [PATCH] Add WebSocket support in storybook image

---
 README.md                                      | 18 ++++++++++++++++++
 .../etc/nginx/templates/default.conf.template  | 10 ++++++++++
 2 files changed, 28 insertions(+)

diff --git a/README.md b/README.md
index d5834a9..a663a31 100644
--- a/README.md
+++ b/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
diff --git a/context/storybook/etc/nginx/templates/default.conf.template b/context/storybook/etc/nginx/templates/default.conf.template
index dc7e168..b266a4a 100644
--- a/context/storybook/etc/nginx/templates/default.conf.template
+++ b/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 {