Serve client on 127.0.0.1:5400/client/index.js when running npm run dev#3302
Serve client on 127.0.0.1:5400/client/index.js when running npm run dev#3302
127.0.0.1:5400/client/index.js when running npm run dev#3302Conversation
…n dev` can auto-build client as necessary
There was a problem hiding this comment.
Pull request overview
Adds a Vite dev-server middleware to serve the built @wp-playground/client bundle at /client/ (mirroring production) and automatically triggers an Nx build when the bundle is missing or stale.
Changes:
- Added
serve-client-libraryVite plugin to serve/client/*fromdist/packages/playground/client. - Implemented auto-build and staleness detection (source mtime vs built
index.jsmtime). - Expanded
node:fsimports to support reading and stat’ing served files.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Replace runtime require('child_process') with a static import from
node:child_process, log stderr on build failures, and sanitize the
request URL to prevent path traversal and query-string issues.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| let buildInProgress = false; | ||
| let stalenessWarned = false; | ||
|
|
||
| function newestMtimeIn(dir: string): number { |
There was a problem hiding this comment.
The function name newestMtimeIn uses abbreviation 'mtime' which may not be immediately clear to all developers. Consider renaming to getNewestModificationTimeIn or getLatestFileModificationTime for better clarity.
| const urlPath = new URL(req.url, 'http://localhost') | ||
| .pathname; |
There was a problem hiding this comment.
The req.url is used directly in URL construction without validation. Malformed URLs could cause the URL constructor to throw an exception. Consider wrapping this in a try-catch block to handle potential URL parsing errors gracefully.
| const urlPath = new URL(req.url, 'http://localhost') | |
| .pathname; | |
| let urlPath: string; | |
| try { | |
| urlPath = new URL(req.url, 'http://localhost') | |
| .pathname; | |
| } catch { | |
| res.statusCode = 400; | |
| res.end('Invalid request URL'); | |
| return; | |
| } |
|
@copilot Can you mark your comments that has been addressed as resolved? |
ashfame
requested review from
a team and
fellyph
and removed request for
a team
|
@ashfame we have a |
|
@bgrgicak It might, but won't be as convenient as just running a single command and having it work exactly as we have in production. |
This pull request enhances the local development experience for the Playground website by adding a Vite plugin that serves the built
@wp-playground/clientlibrary at/client/, closely matching the production environment. The plugin also auto-builds the client library if it's missing and warns if the build is stale, ensuring developers always have an up-to-date client bundle available during development.Key changes:
Development server enhancements:
serve-client-library) invite.config.tsto serve the@wp-playground/clientlibrary at/client/, auto-build it if missing, and trigger a rebuild if source files are newer than the built output. This improves local development parity with production and reduces manual build steps.Utility improvements:
fsimports invite.config.tsto includereadFileSync,readdirSync, andstatSync, supporting the new plugin's file system operations.Motivation for the change, related issues
In external projects, when we need to modify playground code and run that to fix an issue, we were not able to fetch the client dynamically from local env, as we were doing it in production environment.
Related to https://linear.app/a8c/issue/ARC-1443/launch-on-wordpresscom-takes-30-seconds-without-any-loading-spinner
Testing Instructions (or ideally a Blueprint)
npm run devplayground.wordpress.nethost with127.0.0.1for/remote.htmland/client/index.jsurls.