feat: added the app option to allow to use custom application

lib/Server.js

@@ -194,6 +194,7 @@ const schema = require("./options.json");
  * @property {boolean | ServerOptions} [https]
  * @property {boolean} [http2]
  * @property {"http" | "https" | "spdy" | string | ServerConfiguration} [server]
+ * @property {() => Promise<T>} [app]
  * @property {boolean | "sockjs" | "ws" | string | WebSocketServerConfiguration} [webSocketServer]
  * @property {ProxyConfigArray} [proxy]
  * @property {boolean | string | Open | Array<string | Open>} [open]
@@ -1713,7 +1714,7 @@ class Server {
     }
 
     this.setupHooks();
-    this.setupApp();
+    await this.setupApp();
     this.setupHostHeaderCheck();
     this.setupDevMiddleware();
     // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
@@ -1772,16 +1773,14 @@ class Server {
 
   /**
    * @private
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  setupApp() {
-    // eslint-disable-next-line import/no-extraneous-dependencies
-    const connect = require("connect");
-    const app = connect();
-
+  async setupApp() {
     /** @type {T | undefined}*/
-    this.app = /** @type {any} */ (app);
-    // this.app = new /** @type {any} */ (getExpress())();
+    this.app =
+      typeof this.options.app === "function"
+        ? await this.options.app()
+        : getExpress()();
   }
 
   /**

lib/options.json

@@ -2,6 +2,11 @@
   "title": "Dev Server options",
   "type": "object",
   "definitions": {
+    "App": {
+      "instanceof": "Function",
+      "description": "Allows to use custom applications (i.e. 'connect', 'fastify' and etc).",
+      "link": " https://webpack.js.org/configuration/dev-server/#devserverapp"
+    },
     "AllowedHosts": {
       "anyOf": [
         {
@@ -997,6 +1002,9 @@
     "server": {
       "$ref": "#/definitions/Server"
     },
+    "app": {
+      "$ref": "#/definitions/App"
+    },
     "setupExitSignals": {
       "$ref": "#/definitions/SetupExitSignals"
     },

test/__snapshots__/validate-options.test.js.snap.webpack5

@@ -52,6 +52,20 @@ exports[`options validate should throw an error on the "allowedHosts" option wit
     * options.allowedHosts should be a non-empty string."
 `;
 
+exports[`options validate should throw an error on the "app" option with 'false' value 1`] = `
+"ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
+ - options.app should be an instance of function.
+   -> Allows to use custom applications (i.e. 'connect', 'fastify' and etc).
+   -> Read more at  https://webpack.js.org/configuration/dev-server/#devserverapp"
+`;
+
+exports[`options validate should throw an error on the "app" option with 'test' value 1`] = `
+"ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
+ - options.app should be an instance of function.
+   -> Allows to use custom applications (i.e. 'connect', 'fastify' and etc).
+   -> Read more at  https://webpack.js.org/configuration/dev-server/#devserverapp"
+`;
+
 exports[`options validate should throw an error on the "bonjour" option with '' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.bonjour should be one of these:

test/validate-options.test.js

@@ -437,6 +437,16 @@ const tests = {
       },
     ],
   },
+  app: {
+    success: [
+      () => require("connect")(),
+      async () =>
+        new Promise((resolve) => {
+          resolve(require("connect")());
+        }),
+    ],
+    failure: ["test", false],
+  },
   static: {
     success: [
       "path",