Add option to disable http2 when using https (#562)

Author: tajo

.changeset/blue-spies-destroy.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": minor
+---
+
+Add option to disable http2 when using https. We observed that some bigger Ladle instances throw ERR_HTTP2_PROTOCOL_ERROR errors after upgrading from Node18 to Node20. This setting can be used as a workaround.

packages/ladle/lib/cli/vite-dev.js

@@ -2,6 +2,7 @@ import { createServer, searchForWorkspaceRoot } from "vite";
 import koa from "koa";
 import http from "http";
 import http2 from "http2";
+import https from "https";
 import c2k from "koa-connect";
 import path from "path";
 import getPort from "get-port";
@@ -102,8 +103,8 @@ const bundler = async (config, configFolder) => {
       (vite.config.server.host === true
         ? "0.0.0.0"
         : typeof vite.config.server.host === "string"
-        ? vite.config.server.host
-        : "localhost");
+          ? vite.config.server.host
+          : "localhost");
     const serverUrl = `${useHttps ? "https" : "http"}://${hostname}:${port}${
       vite.config.base || ""
     }`;
@@ -131,27 +132,33 @@ const bundler = async (config, configFolder) => {
     };
 
     if (useHttps) {
-      http2
-        .createSecureServer(
-          {
-            // Support HMR WS connection
-            allowHTTP1: true,
-            maxSessionMemory: 100,
-            settings: {
-              // Note: Chromium-based browser will initially allow 100 concurrent streams to be open
-              // over a single HTTP/2 connection, unless HTTP/2 server advertises a different value,
-              // in which case it will be capped at maximum of 256 concurrent streams. Hence pushing
-              // to the limit while in development, in an attempt to maximize the dev performance by
-              // minimizing the chances of the module requests queuing/stalling on the client-side.
-              // @see https://source.chromium.org/chromium/chromium/src/+/4c44ff10bcbdb2d113dcc43c72f3f47a84a8dd45:net/spdy/spdy_session.cc;l=477-479
-              maxConcurrentStreams: 256,
+      if (config.disableHttp2) {
+        https
+          .createServer({ ...vite.config.server.https }, app.callback())
+          .listen(port, hostname, listenCallback);
+      } else {
+        http2
+          .createSecureServer(
+            {
+              // Support HMR WS connection
+              allowHTTP1: true,
+              maxSessionMemory: 100,
+              settings: {
+                // Note: Chromium-based browser will initially allow 100 concurrent streams to be open
+                // over a single HTTP/2 connection, unless HTTP/2 server advertises a different value,
+                // in which case it will be capped at maximum of 256 concurrent streams. Hence pushing
+                // to the limit while in development, in an attempt to maximize the dev performance by
+                // minimizing the chances of the module requests queuing/stalling on the client-side.
+                // @see https://source.chromium.org/chromium/chromium/src/+/4c44ff10bcbdb2d113dcc43c72f3f47a84a8dd45:net/spdy/spdy_session.cc;l=477-479
+                maxConcurrentStreams: 256,
+              },
+              // @ts-ignore
+              ...vite.config.server.https,
             },
-            // @ts-ignore
-            ...vite.config.server.https,
-          },
-          app.callback(),
-        )
-        .listen(port, hostname, listenCallback);
+            app.callback(),
+          )
+          .listen(port, hostname, listenCallback);
+      }
     } else {
       http.createServer(app.callback()).listen(port, hostname, listenCallback);
     }

packages/ladle/lib/shared/default-config.js

@@ -7,6 +7,7 @@ export default {
   storyOrder: (stories) => stories, // default is alphabetical
   viteConfig: undefined,
   appendToHead: "",
+  disableHttp2: false,
   noWatch: false,
   port: 61000,
   previewPort: 8080,

packages/ladle/lib/shared/types.ts

@@ -178,6 +178,7 @@ export type Config = {
   defaultStory: string;
   storyOrder: StoryOrder;
   appendToHead: string;
+  disableHttp2: boolean;
   viteConfig?: string;
   host?: string;
   port: number;