From a99de7a0451f37dd27e3457594c61556bf6e4724 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Fri, 6 Mar 2026 18:27:55 +0100 Subject: [PATCH 1/2] chore: remove http-proxy-middleware --- package.json | 2 +- .../dev/storybook-builder-parcel/package.json | 1 - .../dev/storybook-builder-parcel/preset.js | 66 +++++++++++-------- 3 files changed, 39 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index a9e0a772283..55c85790e4b 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "install-17": "node scripts/react-17-install-prep.mjs && yarn add react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 react-test-renderer@^16.9.0 && node scripts/oldReactSupport.mjs", "install-18": "node scripts/react-18-install-prep.mjs && yarn add react@^18 react-dom@^18 react-test-renderer@^18.3.1 && node scripts/oldReactSupport.mjs", "install-canary": "node scripts/react-canary-install-prep.mjs && yarn add react@canary react-dom@canary", - "start": "cross-env NODE_ENV=storybook storybook dev -p 9003 --ci -c '.storybook'", + "start": "cross-env NODE_ENV=storybook storybook dev -p 9003 --host 127.0.0.1 --ci -c '.storybook'", "build:storybook": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook", "start:chromatic": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9004 --ci -c '.chromatic'", "build:chromatic": "CHROMATIC=1 storybook build -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic", diff --git a/packages/dev/storybook-builder-parcel/package.json b/packages/dev/storybook-builder-parcel/package.json index a812d1fa824..c994ccee8ca 100644 --- a/packages/dev/storybook-builder-parcel/package.json +++ b/packages/dev/storybook-builder-parcel/package.json @@ -6,7 +6,6 @@ "dependencies": { "@parcel/core": "^2.16.3", "@parcel/reporter-cli": "^2.16.3", - "http-proxy-middleware": "^2.0.6", "storybook": "^9.0.18" }, "peerDependencies": { diff --git a/packages/dev/storybook-builder-parcel/preset.js b/packages/dev/storybook-builder-parcel/preset.js index 0ae11c69d0e..351e56166eb 100644 --- a/packages/dev/storybook-builder-parcel/preset.js +++ b/packages/dev/storybook-builder-parcel/preset.js @@ -1,6 +1,6 @@ const { Parcel } = require("@parcel/core"); const path = require("path"); -const { createProxyMiddleware } = require("http-proxy-middleware"); +const http = require("http"); const fs = require("fs"); const { generateIframeModern } = require("./gen-iframe-modern.js"); @@ -16,35 +16,43 @@ exports.start = async function ({ options, router }) { return next(); } - let proxy = createProxyMiddleware({ - target: "http://localhost:3000/", - selfHandleResponse: true, - logLevel: "warn", - onProxyRes(proxyRes, req, res) { - // Parcel dev server responds with main HTML page if the file doesn't exist... - if ( - proxyRes.statusCode === 404 || - (proxyRes.headers["content-type"]?.startsWith("text/html") && - !req.url.startsWith("/iframe.html")) - ) { - return next(); - } else { - res.statusCode = proxyRes.statusCode; - for (let header in proxyRes.headers) { - res.setHeader(header, proxyRes.headers[header]); - } - proxyRes.pipe(res); - } - }, + const proxyOptions = { + hostname: "127.0.0.1", + port: 3000, + path: req.url, + method: req.method, + headers: { ...req.headers, host: "127.0.0.1:3000" }, + }; + + const proxyReq = http.request(proxyOptions, (proxyRes) => { + // Parcel dev server responds with main HTML page if the file doesn't exist... + if ( + proxyRes.statusCode === 404 || + (proxyRes.headers["content-type"]?.startsWith("text/html") && + !req.url.startsWith("/iframe.html")) + ) { + proxyRes.resume(); + return next(); + } + + res.writeHead(proxyRes.statusCode, proxyRes.headers); + proxyRes.pipe(res); }); - // Remove socket/connection temporarily to prevent proxy from subscribing to `close` event and triggering warning. - let { socket, connection } = req; - req.socket = null; - req.connection = null; - await proxy(req, res, next); - req.socket = socket; - req.connection = connection; + proxyReq.on("error", (err) => { + if (err.code === "ECONNREFUSED") return next(); + if (!res.headersSent) res.writeHead(502).end(); + }); + + req.on("close", () => { + proxyReq.destroy(); + }); + + if (req.method === "POST" || req.method === "PUT" || req.method === "PATCH") { + req.pipe(proxyReq); + } else { + proxyReq.end(); + } }); let subscription = await parcel.watch(); @@ -89,11 +97,13 @@ async function createParcel(options, isDev = false) { serveOptions: isDev ? { port: 3000, + host: "127.0.0.1", } : null, hmrOptions: isDev ? { port: 3001, + host: "127.0.0.1", } : null, additionalReporters: [ From 4b6d5a20133235cec458bb23f5bf3afb0a48a711 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sat, 7 Mar 2026 20:40:18 +0100 Subject: [PATCH 2/2] feat: add timeout --- packages/dev/storybook-builder-parcel/preset.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/dev/storybook-builder-parcel/preset.js b/packages/dev/storybook-builder-parcel/preset.js index 351e56166eb..c4b1aeb3fe0 100644 --- a/packages/dev/storybook-builder-parcel/preset.js +++ b/packages/dev/storybook-builder-parcel/preset.js @@ -39,6 +39,13 @@ exports.start = async function ({ options, router }) { proxyRes.pipe(res); }); + proxyReq.setTimeout(10000, () => { + proxyReq.destroy(new Error("Proxy request timed out after 10 seconds")); + if (!res.headersSent) { + res.writeHead(504).end("Proxy Timeout"); + } + }); + proxyReq.on("error", (err) => { if (err.code === "ECONNREFUSED") return next(); if (!res.headersSent) res.writeHead(502).end();