feat(react): add react + vite + vitest + playwright example - #35921
feat(react): add react + vite + vitest + playwright example#35921FrozenPandaz merged 27 commits into
Conversation
✅ Deploy Preview for nx-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for nx-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
View your CI Pipeline Execution ↗ for commit 565f66a
☁️ Nx Cloud last updated this comment at |
062e90d to
2610f8f
Compare
2610f8f to
0792735
Compare
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub. |
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
![nx-cloud[bot]](https://avatars.githubusercontent.com/in/80458?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
15c0ce5 to
84a2fab
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
0bfeb2b to
fb023eb
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
4807bef to
1f2a189
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
e7386a2 to
561f1ad
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
272310b to
f749c39
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
…lone workspaces Applies the csr-css template to the other 11 single-app examples: own nx.json registering the local @nx/rspack/plugin, pnpm-workspace.yaml and committed lockfile, link: dependencies on @nx/angular-rspack and @nx/rspack, per-example Angular dependencies (platform-server/ssr for the ssr and ssg variants, localize for i18n, express for ssr servers, no zone.js for the zoneless ones), duplicated shared/ fixtures where referenced, and rebased config paths (including the i18n translation files, which were repo-root relative).
…dalone workspace Host and remote stay in one workspace (the host loads the remote at runtime, so they must share a graph): one pnpm-workspace.yaml with the two members, one nx.json registering the local @nx/rspack/plugin, link: dependencies on @nx/angular-rspack, @nx/module-federation and @nx/rspack, and per-member Angular dependencies.
The examples are their own pnpm workspaces now: exclude them from the root workspace, remove the root @nx/rspack/plugin registration and the examples' root tsconfig references, and delete the shared/ fixtures and tsconfig.base.json originals that were duplicated into the examples. The examples-plugin picks each one up (13 handles with a validate target and link-derived implicit dependencies).
The examples are standalone pnpm workspaces with their own generated pnpm-lock.yaml files; unanchor the existing root-only ignore so prettier skips all of them.
The dep object's type property widened to the DependencyType enum, which does not satisfy the RawProjectGraphDependency union under tsgo.
The js plugin only enables analyzeSourceFiles when the workspace root package.json depends on an allowlisted plugin (@nx/workspace, @nx/js, @nx/node, @nx/next, @nx/react, @nx/angular, @nx/web). The examples depend on @nx/angular-rspack and @nx/rspack, which are not on the list, so their projects had no dependency edges. Set pluginsConfig['@nx/js'] explicitly.
The NX_GRAPH_CREATION guard returned an empty config while the graph was being created, so the @nx/rspack plugin had nothing to derive target configuration from. The guard was only needed when the examples lived in the repo's own graph; in the standalone workspaces createConfig computes cleanly, and the plugin now derives precise configuration from it — e.g. the dist/browser and dist/server outputs of the ssr and app-shell examples. The manual build target blocks in the examples' package.json files are redundant with the derived configuration (shared/ now lives inside each workspace root, so the default production input covers it) and are removed.
…kspace examples/*/* only matched directories that the exclusions removed again; everything under examples/ is a standalone pnpm workspace now.
The examples are standalone workspaces with no Nx Cloud workspace of their own, but child nx processes inherited the repo's CI access token and aborted with a 401. The validate-example wrapper now sets NX_NO_CLOUD for the nested runs, and each example nx.json sets neverConnectToCloud.
…te wrapper
The validate-example wrapper wrote the examples' inner dist without
declaring it; it now declares {projectRoot}/dist (and {projectRoot}/*/dist
for the module-federation members) as outputs.
It also ran the examples' postinstall, which builds the linked packages
through a root-workspace nx invocation whose graph and hash computation
reads root config inside the sandbox. dependsOn ^build already guarantees
those builds here, so the wrapper installs with --ignore-scripts; the
postinstall remains for the manual fresh-clone flow.
Every example now declares nx as a link: devDependency and builds it in its postinstall, so commands inside the examples run the local nx build instead of resolving up to the repo root. The react example's playwright webServer now uses an nx command so the @nx/playwright plugin derives the e2e dependsOn on serve (and restores parallelism).
Playwright's transform follows the linked packages' tsconfig references (tsconfig.spec.json is excluded from ^production), and esbuild reads the repo-root tsconfig.json while walking ancestor directories, so use ^default and declare the root tsconfig as inputs of validate-example.
2e3c3a1 to
9a46ca9
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
54107e0 to
13682ef
Compare
Give the example its own tsconfig.base.json instead of extending the repo root's. Without the root base's composite flag, the typescript-sync generator no longer wires the example into the root TS solution, matching how the angular-rspack examples work.
…-Healing CI Rerun]
There was a problem hiding this comment.
Nx Cloud has identified a flaky task in your failed CI:
🔂 Since the failure was identified as flaky, we triggered a CI rerun by adding an empty commit to this branch.
🎓 Learn more about Self-Healing CI on nx.dev
## Current Behavior There's no React example in the repo that dogfoods the local `@nx/vite` / `@nx/react` / `@nx/playwright` / `@nx/eslint` packages end-to-end. Separately, the global `test` targetDefault applied jest-only options to **every** `test` target — including `@nx/vitest` ones: `--detectOpenHandles`, `--forceExit`, and `NODE_OPTIONS=--experimental-vm-modules`. vitest rejects those jest flags (`CACError: Unknown option '--detectOpenHandles'`), so every vitest project had to carry a per-project `test` override to strip them. ## Expected Behavior This PR has two commits: **`chore(repo)`: scope test target defaults by plugin (jest vs vitest)** - Scope the jest flags to `@nx/jest/plugin` targets, and add a `@nx/vitest`-scoped default that supplies just `--passWithNoTests`. - Vitest `test` targets now resolve correct args with no per-project override, so the redundant overrides are removed from `@nx/angular-rspack` and `@nx/angular-rspack-compiler` (their tests still pass — 25 and 80 specs respectively; the only real dependency, `^build-native`, comes from the targetDefault). - Consolidate the `@nx/vite/plugin` and `@nx/vitest` plugin declarations (drop the dead `angular-rspack*` vite include). **`feat(react)`: add react + vite + vitest + playwright example** - Add `examples/react/basic` — a React app built with **Vite**, unit-tested with **Vitest**, e2e-tested with **Playwright**, and linted with **ESLint** — all linked to the local workspace packages via `workspace:*`, so it dogfoods the in-repo builds. - Targets verified: `build`, `test` (2 specs), `pw-e2e` (chromium, 1 spec), `lint`, `typecheck`. Workspace `nx sync:check` clean. ## Related Issue(s) Tracked in NXC-4540 (linked via branch name). --------- Co-authored-by: nx-cloud[bot] <71083854+nx-cloud[bot]@users.noreply.github.com> Co-authored-by: FrozenPandaz <FrozenPandaz@users.noreply.github.com> (cherry picked from commit 71436fb)
2 participants
Current Behavior
There's no React example in the repo that dogfoods the local
@nx/vite/@nx/react/@nx/playwright/@nx/eslintpackages end-to-end.Separately, the global
testtargetDefault applied jest-only options to everytesttarget — including@nx/vitestones:--detectOpenHandles,--forceExit, andNODE_OPTIONS=--experimental-vm-modules. vitest rejects those jest flags (CACError: Unknown option '--detectOpenHandles'), so every vitest project had to carry a per-projecttestoverride to strip them.Expected Behavior
This PR has two commits:
chore(repo): scope test target defaults by plugin (jest vs vitest)@nx/jest/plugintargets, and add a@nx/vitest-scoped default that supplies just--passWithNoTests.testtargets now resolve correct args with no per-project override, so the redundant overrides are removed from@nx/angular-rspackand@nx/angular-rspack-compiler(their tests still pass — 25 and 80 specs respectively; the only real dependency,^build-native, comes from the targetDefault).@nx/vite/pluginand@nx/vitestplugin declarations (drop the deadangular-rspack*vite include).feat(react): add react + vite + vitest + playwright exampleexamples/react/basic— a React app built with Vite, unit-tested with Vitest, e2e-tested with Playwright, and linted with ESLint — all linked to the local workspace packages viaworkspace:*, so it dogfoods the in-repo builds.build,test(2 specs),pw-e2e(chromium, 1 spec),lint,typecheck. Workspacenx sync:checkclean.Related Issue(s)
Tracked in NXC-4540 (linked via branch name).