feat!: replace express with connect as default server (#143)

Author: chenjiahan

docs/migrate-v1-to-v2.md

@@ -57,9 +57,25 @@ The minimum supported Node.js version is now `^20.19.0 || >=22.12.0`.
 
 > Refer to the [http-proxy-middleware v3 migration guide](https://github.com/chimurai/http-proxy-middleware/blob/master/MIGRATION.md) for details.
 
-### Upgraded Express to v5
+### Default app now uses `connect`
 
-`express` has been updated to v5, see [Introducing Express v5: A New Era for the Node.js Framework](https://expressjs.com/2024/10/15/v5-release.html) for details.
+When `devServer.app` is omitted, `@rspack/dev-server` now creates a
+`connect` app instead of an Express app.
+
+The dev server only needs a minimal middleware pipeline. Connect provides the same `(req, res, next)` interface as Express while being significantly smaller and having fewer dependencies, making it a better fit for this use case.
+
+If you relied on Express-only APIs on `devServer.app`, such as `app.get()`,
+`app.post()`, or `res.send()`, provide your own Express app explicitly:
+
+```js
+import express from 'express';
+
+export default {
+  devServer: {
+    app: async () => express(),
+  },
+};
+```
 
 ### Removed `spdy` support
 

package.json

@@ -45,15 +45,17 @@
     ]
   },
   "dependencies": {
+    "@types/connect": "^3.4.38",
     "@types/connect-history-api-fallback": "^1.5.4",
     "@types/serve-index": "^1.9.4",
     "@types/serve-static": "^2.2.0",
     "@types/ws": "^8.18.1",
     "chokidar": "^3.6.0",
+    "connect": "^3.7.0",
     "connect-history-api-fallback": "^2.0.0",
-    "express": "^5.2.1",
     "http-proxy-middleware": "^3.0.5",
     "ipaddr.js": "^2.3.0",
+    "serve-static": "^2.2.1",
     "serve-index": "^1.9.2",
     "webpack-dev-middleware": "^7.4.5",
     "ws": "^8.19.0"
@@ -66,14 +68,13 @@
     "@rspack/plugin-react-refresh": "1.6.1",
     "@rstest/core": "^0.9.0",
     "@types/compression": "^1.8.1",
-    "@types/express": "5.0.6",
     "@types/mime-types": "3.0.1",
     "@types/node": "^24.12.0",
     "@types/node-forge": "^1.3.14",
     "@types/trusted-types": "^2.0.7",
     "@types/ws": "8.18.1",
+    "express": "^5.2.1",
     "compression": "^1.8.1",
-    "connect": "^3.7.0",
     "cross-env": "^10.1.0",
     "css-loader": "^7.1.4",
     "hono": "^4.12.5",

pnpm-lock.yaml

@@ -8,11 +8,12 @@ export default defineConfig({
       dts: true,
       output: {
         externals: {
-          express: 'commonjs express',
+          connect: 'commonjs connect',
           'connect-history-api-fallback':
             'commonjs connect-history-api-fallback',
           'webpack-dev-middleware': 'commonjs webpack-dev-middleware',
           'http-proxy-middleware': 'commonjs http-proxy-middleware',
+          'serve-static': 'commonjs serve-static',
           'serve-index': 'commonjs serve-index',
           selfsigned: 'commonjs selfsigned',
           compression: 'commonjs compression',

rslib.config.ts

@@ -28,7 +28,6 @@ import type {
   DevMiddlewareOptions,
   DevServer,
   EXPECTED_ANY,
-  ExpressApplication,
   FSWatcher,
   HTTPServer,
   HandleFunction,
@@ -74,12 +73,13 @@ import type {
   WebSocketServerImplementation,
   WebSocketURL,
 } from './types';
+import type { ConnectApplication } from './types';
 
 const { styleText } = util;
 const require = createRequire(import.meta.url);
 
 export interface Configuration<
-  A extends BasicApplication = ExpressApplication,
+  A extends BasicApplication = ConnectApplication,
   S extends HTTPServer = HTTPServer,
 > {
   ipc?: boolean | string;
@@ -142,7 +142,8 @@ const memoize = <T>(fn: FunctionReturning<T>): FunctionReturning<T> => {
   };
 };
 
-const getExpress = memoize(() => require('express'));
+const getConnect = memoize(() => require('connect'));
+const getServeStatic = memoize(() => require('serve-static'));
 
 const encodeOverlaySettings = (
   setting?: OverlayMessageOptions,
@@ -184,7 +185,7 @@ function isMultiCompiler(
 }
 
 class Server<
-  A extends BasicApplication = ExpressApplication,
+  A extends BasicApplication = ConnectApplication,
   S extends import('http').Server = HTTPServer,
 > {
   compiler: Compiler | MultiCompiler;
@@ -1519,7 +1520,7 @@ class Server<
     this.app = (
       typeof this.options.app === 'function'
         ? await this.options.app()
-        : getExpress()()
+        : getConnect()()
     ) as A;
   }
 
@@ -1901,9 +1902,9 @@ class Server<
       for (const staticOption of staticOptions) {
         for (const publicPath of staticOption.publicPath) {
           middlewares.push({
-            name: 'express-static',
+            name: 'serve-static',
             path: publicPath,
-            middleware: getExpress().static(
+            middleware: getServeStatic()(
               staticOption.directory,
               staticOption.staticOptions,
             ),
@@ -1947,9 +1948,9 @@ class Server<
         for (const staticOption of staticOptions) {
           for (const publicPath of staticOption.publicPath) {
             middlewares.push({
-              name: 'express-static',
+              name: 'serve-static',
               path: publicPath,
-              middleware: getExpress().static(
+              middleware: getServeStatic()(
                 staticOption.directory,
                 staticOption.staticOptions,
               ),
@@ -2021,11 +2022,11 @@ class Server<
 
     for (const i of middlewares) {
       if (i.name === 'webpack-dev-middleware') {
-        const item = i as MiddlewareObject<A> | RequestHandler;
+        const item = i as MiddlewareObject | RequestHandler;
 
-        if (typeof (item as MiddlewareObject<A>).middleware === 'undefined') {
-          (item as MiddlewareObject<A>).middleware =
-            lazyInitDevMiddleware() as unknown as MiddlewareHandler<A>;
+        if (typeof (item as MiddlewareObject).middleware === 'undefined') {
+          (item as MiddlewareObject).middleware =
+            lazyInitDevMiddleware() as unknown as MiddlewareHandler;
         }
       }
     }

src/server.ts

@@ -18,17 +18,13 @@ export type {
 } from '@rspack/core';
 import type { FSWatcher, WatchOptions } from 'chokidar';
 export type { FSWatcher, WatchOptions };
+import type {
+  Server as ConnectApplication,
+  IncomingMessage as ConnectIncomingMessage,
+} from 'connect';
+export type { ConnectApplication };
 import type { Options as ConnectHistoryApiFallbackOptions } from 'connect-history-api-fallback';
 export type { ConnectHistoryApiFallbackOptions };
-import type {
-  Application as ExpressApplication,
-  ErrorRequestHandler as ExpressErrorRequestHandler,
-  Request as ExpressRequest,
-  RequestHandler as ExpressRequestHandler,
-  Response as ExpressResponse,
-} from 'express';
-
-export type { ExpressApplication };
 import type {
   Options as HttpProxyMiddlewareOptions,
   Filter as HttpProxyMiddlewareOptionsFilter,
@@ -70,10 +66,9 @@ export type HandleFunction =
 export type ServerOptions = import('https').ServerOptions;
 
 // type-level helpers, inferred as util types
-export type Request<T extends BasicApplication = ExpressApplication> =
-  T extends ExpressApplication ? ExpressRequest : IncomingMessage;
-export type Response<T extends BasicApplication = ExpressApplication> =
-  T extends ExpressApplication ? ExpressResponse : ServerResponse;
+export type Request<T extends BasicApplication = ConnectApplication> =
+  T extends ConnectApplication ? ConnectIncomingMessage : IncomingMessage;
+export type Response = ServerResponse;
 
 export type DevMiddlewareOptions<
   T extends Request,
@@ -122,14 +117,14 @@ export interface NormalizedStatic {
 }
 
 export type ServerType<
-  A extends BasicApplication = ExpressApplication,
+  A extends BasicApplication = ConnectApplication,
   S extends import('http').Server = import('http').Server,
 > =
   | LiteralUnion<'http' | 'https' | 'http2', string>
   | ((serverOptions: ServerOptions, application: A) => S);
 
 export interface ServerConfiguration<
-  A extends BasicApplication = ExpressApplication,
+  A extends BasicApplication = ConnectApplication,
   S extends import('http').Server = import('http').Server,
 > {
   type?: ServerType<A, S>;
@@ -210,28 +205,21 @@ export type Headers =
   | Array<{ key: string; value: string }>
   | Record<string, string | string[]>;
 
-export type MiddlewareHandler<T extends BasicApplication = ExpressApplication> =
-  T extends ExpressApplication
-    ? ExpressRequestHandler | ExpressErrorRequestHandler
-    : HandleFunction;
+export type MiddlewareHandler = (...args: EXPECTED_ANY[]) => EXPECTED_ANY;
 
-export interface MiddlewareObject<
-  T extends BasicApplication = ExpressApplication,
-> {
+export interface MiddlewareObject {
   name?: string;
   path?: string;
-  middleware: MiddlewareHandler<T>;
+  middleware: MiddlewareHandler;
 }
 
-export type Middleware<T extends BasicApplication = ExpressApplication> =
-  | MiddlewareObject<T>
-  | MiddlewareHandler<T>;
+export type Middleware = MiddlewareObject | MiddlewareHandler;
 
 export type BasicServer = import('net').Server | import('tls').Server;
 
 export type OverlayMessageOptions = boolean | ((error: Error) => void);
 
-// TypeScript overloads for express-like use
+// TypeScript overloads for connect-like use
 function useFn(fn: NextHandleFunction): BasicApplication;
 function useFn(fn: HandleFunction): BasicApplication;
 function useFn(route: string, fn: NextHandleFunction): BasicApplication;

src/types.ts

@@ -24,13 +24,20 @@ describe('onListening option', () => {
 
           onListeningIsRunning = true;
 
-          devServer.app.get('/listening/some/path', (_, response) => {
-            response.send('listening');
-          });
-
-          devServer.app.post('/listening/some/path', (_, response) => {
-            response.send('listening POST');
-          });
+          devServer.app.use(
+            '/listening/some/path',
+            (request, response, next) => {
+              if (request.method !== 'GET' && request.method !== 'POST') {
+                next();
+                return;
+              }
+
+              response.setHeader('Content-Type', 'text/html; charset=utf-8');
+              response.end(
+                request.method === 'POST' ? 'listening POST' : 'listening',
+              );
+            },
+          );
         },
         port,
       },