Replace Cloudflare direct integration with listhen

Co-authored-by: bookernath <8922457+bookernath@users.noreply.github.com>

Author: Copilot

package.json

@@ -13,7 +13,6 @@
     "nx:prerelease-build": "nx run core:prerelease-build",
     "nx:dev": "nx run core:dev",
     "preinstall": "npx check-node-version --package",
-    "postinstall": "node scripts/install-cloudflared.js || echo '⚠️  Cloudflared installation failed - tunnel features will be unavailable'",
     "prebuild": "rm -rf dist && rm -rf packages/test-framework/report",
     "build": "npm-run-all nx:build",
     "build:server": "http-server dist",
@@ -160,6 +159,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "^15.0.0",
+    "listhen": "^1.9.0",
     "mini-css-extract-plugin": "^2.6.0",
     "msw": "^1.3.2",
     "npm-run-all": "^4.1.5",

scripts/README.md

@@ -1,27 +1,19 @@
 # Development Server Enhancement
 
-This directory contains enhanced development server scripts that improve the BigCommerce Checkout JS development workflow.
+This directory contains enhanced development server scripts that improve the BigCommerce Checkout JS development workflow using [listhen](https://github.com/unjs/listhen).
 
 ## Scripts
 
 ### dev-server.js
-Main development server script that combines webpack development build with HTTP server and optional Cloudflare Tunnels integration.
+Main development server script that combines webpack development build with HTTP server and optional tunneling via listhen.
 
 **Features:**
 - Unified command to start both webpack dev build and HTTP server
-- Optional HTTPS tunneling via Cloudflare Tunnels
-- Automatic process management and cleanup
+- Optional HTTPS tunneling via listhen (powered by untun)
+- Automatic port selection and process management
 - Configurable via CLI arguments or environment variables
 - Verbose logging mode for debugging
-
-### install-cloudflared.js
-Automatically downloads and installs the cloudflared binary required for tunnel functionality.
-
-**Features:**
-- Automatic download from GitHub releases
-- Cross-platform support (currently Linux)
-- Proper executable permissions setup
-- Graceful failure handling
+- Built-in static file serving with CORS support
 
 ### test-dev-server.js
 Test script to verify the development server functionality.
@@ -51,16 +43,26 @@ node scripts/dev-server.js --port 9000 --tunnel --verbose
 ## Environment Variables
 
 - `DEV_SERVER_TUNNEL`: Enable tunnel mode ('true'/'false')
-- `DEV_SERVER_PORT`: HTTP server port (default: 8080)
+- `DEV_SERVER_PORT`: HTTP server port (default: 8080, auto-selected with listhen)
 - `DEV_SERVER_VERBOSE`: Enable verbose logging ('true'/'false')  
-- `CLOUDFLARED_PATH`: Custom path to cloudflared binary
+- `DEV_SERVER_BUILD_DIR`: Build directory to serve (default: build)
 
 ## Architecture
 
-The dev-server.js script manages multiple processes:
+The dev-server.js script manages:
 
 1. **Webpack Process**: Runs `npm run dev` for watch mode compilation
-2. **HTTP Server Process**: Runs `http-server` on the build directory
-3. **Cloudflared Process** (optional): Creates HTTPS tunnel
+2. **Listhen Server**: Elegant HTTP server with optional tunneling capabilities
+   - Static file serving for the build directory
+   - Automatic CORS headers
+   - SPA routing support (fallback to index.html)
+   - Optional HTTPS tunnel via untun/cloudflared
+
+All processes are managed with proper signal handling and cleanup on exit.
+
+## Benefits of Listhen Integration
 
-All processes are managed with proper signal handling and cleanup on exit.
+- **Automatic port selection**: No more port conflicts during development
+- **Built-in tunneling**: Simplified tunnel setup without manual cloudflared installation
+- **Better error handling**: Graceful fallbacks when tunneling is unavailable
+- **Modern architecture**: Based on unjs ecosystem with h3 and nitro foundation