From c76aeda255f77d733d1b03ba84b1785c994cb91d Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 12 Oct 2026 19:23:48 +0800 Subject: [PATCH] refactor(rsbuild): use basic SSL plugin in Express HTTPS example --- pnpm-lock.yaml | 20 +++++++++++++++++--- rsbuild/express-https/README.md | 6 +++--- rsbuild/express-https/package.json | 2 +- rsbuild/express-https/rsbuild.config.js | 2 ++ rsbuild/express-https/server.js | 22 +++------------------- 5 files changed, 26 insertions(+), 26 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b70e4ab..37c3e9aa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -76,6 +76,9 @@ importers: '@rsbuild/core': specifier: 2.2.0 version: 2.2.0(@module-federation/runtime-tools@2.9.0)(core-js@3.49.0) + '@rsbuild/plugin-basic-ssl': + specifier: ^2.0.0 + version: 2.0.0(@rsbuild/core@2.2.0) '@types/express': specifier: ^5.0.6 version: 5.0.6 @@ -85,9 +88,6 @@ importers: express: specifier: ^5.2.1 version: 5.2.1 - selfsigned: - specifier: ^5.5.0 - version: 5.5.0 typescript: specifier: ^5.9.3 version: 5.9.3 @@ -8159,6 +8159,14 @@ packages: '@rsbuild/core': optional: true + '@rsbuild/plugin-basic-ssl@2.0.0': + resolution: {integrity: sha512-QpJFX5dsJks2zilixefmF85HLGL55K7yBbS16UtSFXBWmMIbhcnGh+wqNt6IatsJKTHtHZ/KVINUjaiUALGSGw==} + peerDependencies: + '@rsbuild/core': ^2.0.0 + peerDependenciesMeta: + '@rsbuild/core': + optional: true + '@rsbuild/plugin-check-syntax@1.6.1': resolution: {integrity: sha512-26xtEYN0QjZYoyt0lWnvIztBWjEZJvcfw7MN4f5B4SpNggmnF7F7aNPrgkY3EccXVFx1VGQBhnCkBV//OoS07Q==} peerDependencies: @@ -21098,6 +21106,12 @@ snapshots: - supports-color - webpack + '@rsbuild/plugin-basic-ssl@2.0.0(@rsbuild/core@2.2.0)': + dependencies: + selfsigned: 5.5.0 + optionalDependencies: + '@rsbuild/core': 2.2.0(@module-federation/runtime-tools@2.9.0)(core-js@3.49.0) + '@rsbuild/plugin-check-syntax@1.6.1(@rsbuild/core@2.2.0)': dependencies: acorn: 8.18.0 diff --git a/rsbuild/express-https/README.md b/rsbuild/express-https/README.md index 5790c047..878b7ddf 100644 --- a/rsbuild/express-https/README.md +++ b/rsbuild/express-https/README.md @@ -2,7 +2,7 @@ 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`. +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 uses [`@rsbuild/plugin-basic-ssl`](https://github.com/rstackjs/rsbuild-plugin-basic-ssl) to generate and cache a self-signed certificate. After `createDevServer()`, it reads `server.https` from `rsbuild.getNormalizedConfig()` and passes the HTTPS options to `https.createServer`. ## Setup @@ -20,7 +20,7 @@ Start the HTTPS dev server: pnpm dev ``` -Open the printed `https://localhost:/` URL. The certificate is self-signed (`selfsigned`), so the browser will show a warning — continue once for local development. +Open the printed `https://localhost:/` URL. The certificate is self-signed, so the browser will show a warning — continue once for local development. Build the app for production: @@ -28,7 +28,7 @@ Build the app for production: pnpm build ``` -Preview the production build locally (Rsbuild preview server; use `server.https` or `@rsbuild/plugin-basic-ssl` if you need HTTPS for preview): +Preview the production build locally with Rsbuild's HTTPS preview server: ```bash pnpm preview diff --git a/rsbuild/express-https/package.json b/rsbuild/express-https/package.json index ebd38d18..6a93436e 100644 --- a/rsbuild/express-https/package.json +++ b/rsbuild/express-https/package.json @@ -10,10 +10,10 @@ }, "devDependencies": { "@rsbuild/core": "2.2.0", + "@rsbuild/plugin-basic-ssl": "^2.0.0", "@types/express": "^5.0.6", "@types/node": "^24.12.4", "express": "^5.2.1", - "selfsigned": "^5.5.0", "typescript": "^5.9.3" } } diff --git a/rsbuild/express-https/rsbuild.config.js b/rsbuild/express-https/rsbuild.config.js index 6cd790bf..3963c5bb 100644 --- a/rsbuild/express-https/rsbuild.config.js +++ b/rsbuild/express-https/rsbuild.config.js @@ -1,6 +1,8 @@ import { defineConfig } from '@rsbuild/core'; +import { pluginBasicSsl } from '@rsbuild/plugin-basic-ssl'; export default defineConfig({ + plugins: [pluginBasicSsl()], // Custom Express owns the HTTPS listen socket; keep Rsbuild in middleware mode. server: { middlewareMode: true, diff --git a/rsbuild/express-https/server.js b/rsbuild/express-https/server.js index 1f4c5ab4..45278faa 100644 --- a/rsbuild/express-https/server.js +++ b/rsbuild/express-https/server.js @@ -1,30 +1,12 @@ 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, - }, - }, + rsbuildConfig: content, }); const app = express(); @@ -35,6 +17,8 @@ export async function startDevServer() { // Apply Rsbuild’s built-in middlewares app.use(rsbuildServer.middlewares); + // Read the HTTPS options after plugin-basic-ssl has generated the certificate. + const { https: httpsOptions } = rsbuild.getNormalizedConfig().server; const httpsServer = https.createServer(httpsOptions, app); httpsServer.listen(rsbuildServer.port, async () => {