feat(rsbuild): add Express HTTPS custom server example

rsbuild/express-https/.gitignore

@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

rsbuild/express-https/README.md

@@ -0,0 +1,35 @@
+# Rsbuild + Express (HTTPS)
+
+Custom [Express](https://expressjs.com/) **HTTPS** server integrated with Rsbuild's dev middlewares and HMR.
+
+The plain HTTP version lives in [`../express`](../express). Setting only `server.https` in `rsbuild.config` is not enough for a custom Express server: `app.listen()` still creates an HTTP server. This example creates the TLS socket with `https.createServer` and passes the same certificate into Rsbuild so the client uses `https` / `wss`.
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the HTTPS dev server:
+
+```bash
+pnpm dev
+```
+
+Open the printed `https://localhost:<port>/` URL. The certificate is self-signed (`selfsigned`), so the browser will show a warning — continue once for local development.
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally (Rsbuild preview server; use `server.https` or `@rsbuild/plugin-basic-ssl` if you need HTTPS for preview):
+
+```bash
+pnpm preview
+```

rsbuild/express-https/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@rsbuild-example/express-https",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "node ./server.js",
+    "preview": "rsbuild preview"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "2.2.0",
+    "@types/express": "^5.0.6",
+    "@types/node": "^24.12.4",
+    "express": "^5.2.1",
+    "selfsigned": "^5.5.0",
+    "typescript": "^5.9.3"
+  }
+}

rsbuild/express-https/rsbuild.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  // Custom Express owns the HTTPS listen socket; keep Rsbuild in middleware mode.
+  server: {
+    middlewareMode: true,
+  },
+});

rsbuild/express-https/server.js

@@ -0,0 +1,55 @@
+import https from 'node:https';
+import express from 'express';
+import { createRsbuild, loadConfig } from '@rsbuild/core';
+import selfsigned from 'selfsigned';
+
+export async function startDevServer() {
+  const { content } = await loadConfig({});
+
+  // Generate an untrusted self-signed certificate for local HTTPS.
+  // Your browser will warn once; confirm to continue (same as plugin-basic-ssl).
+  const pems = await selfsigned.generate([{ name: 'commonName', value: 'localhost' }]);
+  const httpsOptions = {
+    key: pems.private,
+    cert: pems.cert,
+  };
+
+  // Pass the same HTTPS options into Rsbuild so asset/HMR URLs use https/wss.
+  // Do not rely on `server.https` alone with `app.listen()` — that stays HTTP.
+  const rsbuild = await createRsbuild({
+    rsbuildConfig: {
+      ...content,
+      server: {
+        ...content.server,
+        middlewareMode: true,
+        https: httpsOptions,
+      },
+    },
+  });
+
+  const app = express();
+
+  // Create Rsbuild DevServer instance (middleware only)
+  const rsbuildServer = await rsbuild.createDevServer();
+
+  // Apply Rsbuild’s built-in middlewares
+  app.use(rsbuildServer.middlewares);
+
+  const httpsServer = https.createServer(httpsOptions, app);
+
+  httpsServer.listen(rsbuildServer.port, async () => {
+    // Notify Rsbuild that the custom server has started
+    await rsbuildServer.afterListen();
+  });
+
+  rsbuildServer.connectWebSocket({ server: httpsServer });
+
+  return {
+    close: async () => {
+      await rsbuildServer.close();
+      httpsServer.close();
+    },
+  };
+}
+
+startDevServer();

rsbuild/express-https/src/index.css

@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}

rsbuild/express-https/src/index.js

@@ -0,0 +1,8 @@
+import './index.css';
+
+document.querySelector('#root').innerHTML = `
+<div class="content">
+  <h1>Rsbuild with Express (HTTPS)</h1>
+  <p>Custom Express HTTPS server + Rsbuild middlewares and HMR.</p>
+</div>
+`;