feat(devServer): using current host and port to create HMR connection

[chenjiahan]

Summary

Make default behavior consistent with rspack-cli / webpack-cli / vite.

const defaultDevClientConfig = {
  path: '/webpack-hmr',
  // By default it is set to the port number of the dev server
  port: '',
  // By default it is set to "location.hostname"
  host: '',
  // By default it is set to "location.protocol === 'https:' ? 'wss' : 'ws'""
  protocol: '',
};

🤖 Generated by Copilot at 1942edf

This pull request improves the HMR (hot module replacement) feature of the modern.js framework by making the devServer.client configuration more flexible and consistent. It updates the code in the server package to use the current host and port of the page for the HMR connection by default. It also updates the documentation in the builder-doc package for both English and Chinese languages, with examples and tips for different scenarios. It adds a changeset file to record the changes for the next release.

Details

🤖 Generated by Copilot at 1942edf

• Add a changeset file to generate changelogs and version bumps for the affected packages (link)
• Update the documentation and the code for the devServer.client configuration in the builder-doc and server packages to use the current host and port of the page for the HMR connection by default (link, link, link, link, link, link, link, link, link)
• Add a new section to the documentation for the devServer.client configuration in the guide/advanced/hmr pages to explain how to handle proxying an online page to local development (link, link)

Related Issue

Checklist

• I have added changeset via pnpm run change.
• I have updated the documentation.
• I have added tests to cover my changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9f31558

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 213 packages

Name	Type
@modern-js/builder-doc	Patch
@modern-js/server	Patch
@modern-js/main-doc	Patch
@modern-js/builder-rspack-provider	Patch
@modern-js/builder-shared	Patch
@modern-js/builder-webpack-provider	Patch
@modern-js/app-tools	Patch
@modern-js/doc-core	Patch
webpack-builder-test	Patch
@e2e/builder	Patch
@modern-js/core	Patch
@modern-js/plugin-storybook	Patch
@modern-js/plugin-swc	Patch
@modern-js/builder	Patch
@modern-js/builder-plugin-esbuild	Patch
@modern-js/builder-plugin-node-polyfill	Patch
@modern-js/builder-plugin-stylus	Patch
@modern-js/builder-plugin-swc-base	Patch
@modern-js/builder-plugin-swc	Patch
@e2e/webpack-builder-image-compress	Patch
@e2e/builder-plugin-import	Patch
@modern-js/builder-plugin-image-compress	Patch
@modern-js/module-tools	Patch
@e2e/webpack-builder-css-modules	Patch
@modern-js/plugin-bff	Patch
@modern-js/plugin-ssg	Patch
@modern-js/plugin-tailwindcss	Patch
@modern-js/plugin-garfish	Patch
@modern-js/plugin-router-v5	Patch
@modern-js/runtime	Patch
@modern-js/plugin-egg	Patch
@modern-js/plugin-express	Patch
@modern-js/plugin-koa	Patch
@modern-js/plugin-nest	Patch
@modern-js/plugin-polyfill	Patch
@modern-js/plugin-server	Patch
@modern-js/plugin-worker	Patch
tests	Patch
@integration-test/alias-set	Patch
api-service-koa	Patch
app-docmuent	Patch
integration-dev-asset-prefix	Patch
async-entry-test	Patch
bff-express	Patch
bff-koa	Patch
integration-register-builder-plugins	Patch
builder-rspack-with-ssr	Patch
builder-rspack	Patch
integration-copy-public-html	Patch
basic-module	Patch
composes-basic	Patch
composes-external	Patch
dev-module	Patch
diff-suffix-module	Patch
global-module	Patch
prod-module	Patch
css	Patch
antd-less	Patch
bad-nested-npm-import	Patch
bad-npm-import	Patch
base-import	Patch
css-ts-declaration	Patch
disable-source-map	Patch
exclude-less	Patch
exclude-sass	Patch
import-common-css	Patch
inline-css-url	Patch
keep-css-url	Patch
less-import	Patch
less-inline-js	Patch
less-npm-import	Patch
multi-css	Patch
multi-less	Patch
multi-sass	Patch
nested-npm-import	Patch
npm-import	Patch
single-css	Patch
single-less	Patch
single-sass	Patch
integration-tailwindcss-v2	Patch
integration-tailwindcss-v3	Patch
tips-to-install-less-plugin	Patch
twin-macro-v2	Patch
twin-macro-v3	Patch
css-modules	Patch
integration-custom-render	Patch
integration-custom-template	Patch
legacy-esbuild-minify-js	Patch
esbuild-transform-and-minify	Patch
@cypress-test/garfish-dashboard-router-v6	Patch
@cypress-test/garfish-dashboard	Patch
@cypress-test/garfish-main-router-v6	Patch
@cypress-test/garfish-main	Patch
@cypress-test/garfish-table	Patch
always-inline	Patch
always-url	Patch
assets-in-css	Patch
inline-limit	Patch
integration-config-async-config-test	Patch
integration-basic-local-config	Patch
integration-config-function-params	Patch
integration-local-config-function	Patch
tmp	Patch
routes	Patch
file-based-router	Patch
use-loader	Patch
select-entry-test	Patch
server-config	Patch
server-middleware	Patch
server-hook-reqeust	Patch
server-hook-response	Patch
server-hook-router	Patch
@integration-test/server-hook-reqeust	Patch
server-prod	Patch
ssg-fixtures-simple	Patch
ssg-fixtures-web-server	Patch
ssr-base-test	Patch
init	Patch
ssr-streaming-test	Patch
swc-minify-css	Patch
swc-minify-js	Patch
transform-fail	Patch
testing-app	Patch
worker-test	Patch
@modern-js/plugin-module-doc	Patch
@modern-js/doc-tools	Patch
integration-module-doc	Patch
@modern-js/doc-tools-doc	Patch
@modern-js/module-tools-docs	Patch
@modern-js/babel-preset-app	Patch
@modern-js/babel-preset-base	Patch
@modern-js/babel-preset-lib	Patch
@modern-js/babel-preset-module	Patch
@modern-js/doc-plugin-auto-sidebar	Patch
@modern-js/plugin-changeset	Patch
@modern-js/plugin-data-loader	Patch
@modern-js/plugin-i18n	Patch
@modern-js/plugin-lint	Patch
@modern-js/plugin-proxy	Patch
@modern-js/plugin-testing	Patch
@modern-js/new-action	Patch
@modern-js-app/eslint-config	Patch
@modern-js/eslint-config	Patch
@modern-js/tsconfig	Patch
@modern-js/bff-core	Patch
@modern-js/bff-runtime	Patch
@modern-js/server-core	Patch
@modern-js/create-request	Patch
@modern-js/prod-server	Patch
@modern-js/server-utils	Patch
@modern-js/plugin-module-babel	Patch
@modern-js/plugin-module-banner	Patch
@modern-js/plugin-module-import	Patch
@modern-js/plugin-module-main-fields	Patch
@modern-js/plugin-module-node-polyfill	Patch
@modern-js/plugin-module-polyfill	Patch
@modern-js/plugin-module-target	Patch
@modern-js/monorepo-tools	Patch
@modern-js/create	Patch
@modern-js/e2e	Patch
@modern-js/node-bundle-require	Patch
@modern-js/plugin	Patch
@modern-js/remark-container	Patch
@modern-js/types	Patch
@modern-js/upgrade	Patch
@modern-js/utils	Patch
@modern-js/babel-compiler	Patch
@scripts/build	Patch
@scripts/check-changeset	Patch
@scripts/codemod	Patch
@scripts/jest-config	Patch
@scripts/lint-package-json	Patch
@scripts/prebundle	Patch
@scripts/update-codesmith	Patch
@scripts/vitest-config	Patch
integration-asset-prefix	Patch
integration-builder-plugins	Patch
integration-copy-assets	Patch
esbuild-integration	Patch
integration-load-config	Patch
runtime	Patch
ssg	Patch
ssr	Patch
swc-integration	Patch
@e2e/webpack-builder-import-antd-v4	Patch
@e2e/webpack-builder-import-antd-v5	Patch
@e2e/webpack-builder-node-polyfill	Patch
@modern-js/generator-common	Patch
@modern-js/generator-plugin	Patch
@modern-js/generator-utils	Patch
@modern-js/bff-generator	Patch
@modern-js/dependence-generator	Patch
@modern-js/doc-generator	Patch
@modern-js/entry-generator	Patch
@modern-js/generator-generator	Patch
@modern-js/module-generator	Patch
@modern-js/module-test-generator	Patch
@modern-js/monorepo-generator	Patch
@modern-js/mwa-generator	Patch
@modern-js/router-v5-generator	Patch
@modern-js/rspack-generator	Patch
@modern-js/ssg-generator	Patch
@modern-js/storybook-generator	Patch
@modern-js/test-generator	Patch
@modern-js/upgrade-generator	Patch
@modern-js/generator-plugin-plugin	Patch
@modern-js/repo-generator	Patch
@modern-js/generator-cases	Patch
@modern-js/base-generator	Patch
@modern-js/changeset-generator	Patch
@modern-js/packages-generator	Patch
@modern-js/server-generator	Patch
@modern-js/tailwindcss-generator	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Patch coverage: 75.42% and project coverage change: +0.35 🎉

Comparison is base (99693f0) 57.59% compared to head (9f31558) 57.95%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3445      +/-   ##
==========================================
+ Coverage   57.59%   57.95%   +0.35%     
==========================================
  Files         672      668       -4     
  Lines       17794    17725      -69     
  Branches     3876     3855      -21     
==========================================
+ Hits        10249    10272      +23     
+ Misses       6934     6846      -88     
+ Partials      611      607       -4     

Impacted Files	Coverage Δ
packages/cli/core/src/nodeApi.ts	0.00% <ø> (ø)
packages/cli/doc-plugin-auto-sidebar/src/index.ts	0.00% <0.00%> (ø)
...s/cli/plugin-changeset/src/commands/releaseNote.ts	36.95% <0.00%> (ø)
packages/cli/plugin-changeset/src/utils/index.ts	100.00% <ø> (ø)
packages/cli/core/src/createCli.ts	72.00% <72.00%> (ø)
packages/cli/plugin-data-loader/src/cli/loader.ts	81.81% <83.33%> (ø)
packages/cli/core/src/config/loadConfig.ts	83.33% <85.71%> (+0.25%)	⬆️
packages/cli/core/src/utils/initAppDir.ts	88.88% <88.88%> (ø)
packages/cli/core/src/index.ts	71.42% <100.00%> (-0.62%)	⬇️
packages/cli/core/src/types/index.ts	100.00% <100.00%> (ø)
... and 5 more

... and 76 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.