feat: allow the server option to be Function (#5275)

Author: alexander-akait

.cspell.json

@@ -67,7 +67,9 @@
     "subsubcomain",
     "noselect",
     "commitlint",
-    "eslintcache"
+    "eslintcache",
+    "hono",
+    "privkey"
   ],
   "ignorePaths": [
     "CHANGELOG.md",

examples/app/connect/README.md

@@ -0,0 +1,23 @@
+# `app` Option
+
+Serve using [`connect`](https://github.com/senchalabs/connect) as an application.
+
+**webpack.config.js**
+
+```js
+const connect = require("connect");
+
+module.exports = {
+  // ...
+  devServer: {
+    server: {
+      app: () => connect(),
+    },
+  },
+};
+```
+
+## What Should Happen
+
+1. The script should open `https://localhost:8080/` in your default browser.
+2. You should see the text on the page itself change to read `Success!`.

examples/app/connect/app.js

@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML = "Success!";

examples/app/connect/webpack.config.js

@@ -0,0 +1,14 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const connect = require("connect");
+const { setup } = require("../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    app: () => connect(),
+  },
+});

examples/app/hono/README.md

@@ -0,0 +1,23 @@
+# `app` Option
+
+Serve using [`hono`](https://github.com/honojs/hono) as an application.
+
+**webpack.config.js**
+
+```js
+const connect = require("connect");
+
+module.exports = {
+  // ...
+  devServer: {
+    server: {
+      app: () => connect(),
+    },
+  },
+};
+```
+
+## What Should Happen
+
+1. The script should open `https://localhost:8080/` in your default browser.
+2. You should see the text on the page itself change to read `Success!`.

examples/app/hono/app.js

@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML = "Success!";

examples/app/hono/ssl/localhost-cert.pem

@@ -0,0 +1,19 @@
+-----BEGIN CERTIFICATE-----
+MIIDCTCCAfGgAwIBAgIUevWiuCfenWuq9KyC8aQ/tc1Io14wDQYJKoZIhvcNAQEL
+BQAwFDESMBAGA1UEAwwJbG9jYWxob3N0MB4XDTI0MDQyNDE2MDYyMloXDTI0MDUy
+NDE2MDYyMlowFDESMBAGA1UEAwwJbG9jYWxob3N0MIIBIjANBgkqhkiG9w0BAQEF
+AAOCAQ8AMIIBCgKCAQEA1v/lb9u9WkqkF7zjIKe2R+b4S0sQnWIfBFZ0ggtaOL0a
+ntud/EuaGQgLtJgSwO2M2xIqKx+yoLhoM+273EJe0KmfJMxYNAkhwP9h6vrKnaQJ
+mpAhoalfEGyCrnHHMKISAAn4Rlc8NXnULoFhHzNm8bdqvP33rCmsJ+tNYC5kwzyt
+HvRNFyg9BOUfACiPW17opFH0rao3IfZrQ6yRbknef1pX1x2pbDAH14rCT/vXaTs6
+VGuqLE/wRsSt+7nMHy/PmXxMyb4G4/UflYtnKfmXpDRw+TDEGzvTZedtoOz+rrJC
+e989R9qYGrlPfyfZbI+O348FV66I+jcD+/EUQs+HkwIDAQABo1MwUTAdBgNVHQ4E
+FgQU6bk4LSwtVQEt7V/ev+Zj270zdAkwHwYDVR0jBBgwFoAU6bk4LSwtVQEt7V/e
+v+Zj270zdAkwDwYDVR0TAQH/BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEAUBgo
+E3CZrrc/MaadFg1meNk+eKACmTsIa5cT6zi7MsvoKakXEd4bGd+iLifUzlAa1ygj
+dQppfprb5t68I7oO9/lkh2DfKrXxW/RpdhB05KslUd8q/3XY5kyao5quzeiVoMHR
+u+XYjoy2mTwdUC2uzFy6rkHsAkJy2vJJoDdlNsrKn6AZmh+voHHKrAtOL4gnanQV
+wR1u8eBVfk2MKIl2pNSCA4bD16uZyp3+oqq097BEoVa1pR+l8nwbsh/YfALifq/d
+P3yiN5+EqgiOIF9b8PZORe+Ry1O7uvPnU2ZRkVWPJ1S17Ms0lnr7IY3qjSBTuK66
+5uYi7ojrb5Vf0UL5oQ==
+-----END CERTIFICATE-----

examples/app/hono/ssl/localhost-privkey.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEugIBADANBgkqhkiG9w0BAQEFAASCBKQwggSgAgEAAoIBAQDW/+Vv271aSqQX
+vOMgp7ZH5vhLSxCdYh8EVnSCC1o4vRqe2538S5oZCAu0mBLA7YzbEiorH7KguGgz
+7bvcQl7QqZ8kzFg0CSHA/2Hq+sqdpAmakCGhqV8QbIKucccwohIACfhGVzw1edQu
+gWEfM2bxt2q8/fesKawn601gLmTDPK0e9E0XKD0E5R8AKI9bXuikUfStqjch9mtD
+rJFuSd5/WlfXHalsMAfXisJP+9dpOzpUa6osT/BGxK37ucwfL8+ZfEzJvgbj9R+V
+i2cp+ZekNHD5MMQbO9Nl522g7P6uskJ73z1H2pgauU9/J9lsj47fjwVXroj6NwP7
+8RRCz4eTAgMBAAECggEAA+zbFv43iEj5kvdfXC7DrK9iVBmUPZNXhqA/c0paxNNr
+A4B182+76f4UHKF0IjKUEkHUJEJpY/bJ7DzIY76QdZXLMoRKjfSmuZvQAVa/0T33
+8Or1ujpZ4nZgsmegX9ptorOL5VjdYAqP3aN+DvBEzl/vYnDujyWZn4bzvDBMpaXS
+39qW1MkcZ8UiP1fRad76+S57WnieBV+NRHYEAiDdMFKXLuw/igX/xOSZgq5Jh3I2
+hLS49S41dN1P9l9H2bPMw0CthNvMPPaemwKHz+84hSS+P4VJOWJzlGnXEdIFuqBR
+GFBESQzcemfS9DDB22Yt06YujBCbwTVVAxj73lnKkQKBgQDvYXK36J9y/NphDAWi
+Cwti5oE3eSfV0YazQwm+rRwC64wbpBFAm9ujwjUmaYBg75lBLF5nOOe8s1n95g5I
+tLfFb+zuZh8NNLjhfNE9/SNmRnnMvbcaDHeIE2RMAz+PuLN/gFLmsVIwK2X1LRC2
+0vHjw9Yzh6JLiOajAchzhZiCEQKBgQDl7R6Wfggo8myETA8Uv5tWot3IcquRkEl/
+TRCyao2/79rAGexS7piwD7FPdSDOk1zfZFYUOMzyMjj60sGcPRPqRX6D0usEODLQ
+TwsTJSCNgPnIOkqKkccwtqlTimbRIrPUSQfFPj56RzKKWdrJ/P3LPRjzkK7i3vLV
+EGlAENaLYwKBgHKSOnzpWr+HY+IFBgErthRs7LWnSDifYxATauuXIQwIvvNP0G4S
+6snzHss2vZonszstSDWxV8DKOq052eZUkIxv6H+l4wDIFiDeQ6uep73Ax3UF7EgM
+ZX18gombGGXqagcBXSxK/GJPsynomtJWHi38Ql5BcZ0jdffY157q9zZxAoGAPZtD
+Tt+GIDKUkP4wLEcKwDPzaPoQrngSuWFUz/ls8bi6zC4l/DKiBsqtn7Sqja8+ezzP
+M6vkfiCm084UwmA7LdJhC8E/52mHc/k55m9UQZYFV3kG8AoPbSYESLYUxoSd2ouW
+4WrEIs9g42EgFm8LMaG1Rc3GjlNejWhQSzI3yjECf3v7VoAcUwVfuVkwbm9W24vR
+neFTF8QBl//fxIdxZwoj5SrSgMOjmZ3pXA/ZbFJ0pB4Rh5dmKTYqdpfXsOTiBuwB
+XlqPVpN8UZEl3edpufLDyPldNej/9kEAkK5FS3YVyIQEg75739bCTlfzzCX1HdMx
+q98XYm/n5LWYFezsAt0=
+-----END PRIVATE KEY-----

examples/app/hono/webpack.config.js

@@ -0,0 +1,55 @@
+"use strict";
+
+const wdm = require("webpack-dev-middleware");
+const { Hono } = require("hono");
+const { serve } = require("@hono/node-server");
+// eslint-disable-next-line import/extensions, import/no-unresolved
+const { serveStatic } = require("@hono/node-server/serve-static");
+const { setup } = require("../../util");
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    // WARNING:
+    //
+    // You always need to set up middlewares which you required for your app,
+    // built-in middlewares (like `history-api-fallback`/etc) doesn't work by default with `hono`
+    setupMiddlewares: (_, devServer) => [
+      {
+        name: "webpack-dev-middleware",
+        middleware: wdm.honoWrapper(devServer.compiler),
+      },
+      {
+        name: "static",
+        path: "/.assets/*",
+        middleware: serveStatic({
+          root: "../../.assets",
+          rewriteRequestPath: (item) => item.replace(/^\/\.assets\//, "/"),
+        }),
+      },
+    ],
+    app: () => new Hono(),
+    server: (_, app) =>
+      serve({
+        fetch: app.fetch,
+        //
+        // Uncomment for `https`
+        // createServer: require('node:https').createServer,
+        // serverOptions: {
+        //   key: fs.readFileSync("./ssl/localhost-privkey.pem"),
+        //   cert: fs.readFileSync("./ssl/localhost-cert.pem"),
+        // },
+        //
+        // Uncomment for `http2`
+        // createServer: require("node:http2").createSecureServer,
+        // serverOptions: {
+        //   allowHTTP1: true,
+        //   key: require("fs").readFileSync("./ssl/localhost-privkey.pem"),
+        //   cert: require("fs").readFileSync("./ssl/localhost-cert.pem"),
+        // },
+      }),
+  },
+});

examples/server/http2/README.md

@@ -0,0 +1,22 @@
+# HTTP2 server
+
+**webpack.config.js**
+
+```js
+const connect = require("connect");
+
+module.exports = {
+  // ...
+  devServer: {
+    server: {
+      server: "http2",
+      app: () => connect(),
+    },
+  },
+};
+```
+
+## What Should Happen
+
+1. The script should open `https://localhost:8080/` in your default browser.
+2. You should see the text on the page itself change to read `Success!`.

examples/server/http2/app.js

@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML = "Success!";

examples/server/http2/webpack.config.js

@@ -0,0 +1,16 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const connect = require("connect");
+const { setup } = require("../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    server: "http2",
+    // Only `connect` supports `http2`
+    app: () => connect(),
+  },
+});

examples/util.js

@@ -4,6 +4,7 @@
 
 const path = require("path");
 const fs = require("graceful-fs");
+const mime = require("mime");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { marked } = require("marked");
 
@@ -25,9 +26,18 @@ module.exports = {
 
     const result = { ...defaults, ...config };
     const onBeforeSetupMiddleware = ({ app }) => {
-      app.get("/.assets/*", (req, res) => {
-        const filename = path.join(__dirname, "/", req.path);
-        res.sendFile(filename);
+      app.use("/.assets/", (req, res, next) => {
+        if (req.method !== "GET" && req.method !== "HEAD") {
+          next();
+          return;
+        }
+
+        res.setHeader("Content-Type", mime.lookup(req.url));
+
+        const filename = path.join(__dirname, "/.assets/", req.url);
+        const stream = fs.createReadStream(filename);
+
+        stream.pipe(res);
       });
     };
     const renderer = new marked.Renderer();