Files

T

History

Jason Jean 71436fbee8 feat(repo): add react + vite + vitest + playwright example (#35921 )

## 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>

2026-07-17 17:04:29 -04:00

e2e

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

src

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

eslint.config.mjs

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

index.html

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

nx.json

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

package.json

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

playwright.config.ts

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

pnpm-lock.yaml

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

pnpm-workspace.yaml

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

README.md

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

tsconfig.app.json

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

tsconfig.base.json

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

tsconfig.json

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

tsconfig.spec.json

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

vite.config.mts

feat(repo): add react + vite + vitest + playwright example (#35921 )

2026-07-17 17:04:29 -04:00

README.md

examples-react-basic

A React app built with Vite, unit-tested with Vitest, end-to-end tested with Playwright, and linted with ESLint. It exists to dogfood the Nx plugins from this repository: it is a standalone Nx + pnpm workspace whose @nx/* dependencies are link:ed to the local packages/*, so target inference and runtime helpers come from the local builds rather than a published release.

How it is wired

This directory is its own pnpm workspace (pnpm-workspace.yaml) with its own committed pnpm-lock.yaml, excluded from the repo root workspace and .nxignored from the root Nx graph.
package.json declares @nx/vite, @nx/react, @nx/playwright, @nx/eslint, and @nx/eslint-plugin as link:../../../packages/* dependencies — link: works across workspace boundaries, and pnpm symlinks them straight to the local packages.
This directory's own nx.json registers the plugins; because plugin resolution starts from this workspace's node_modules, the local plugin builds create the targets.
postinstall builds the linked packages through the repo root (nx run-many -t build -p vite react playwright eslint eslint-plugin), so a fresh clone works with just pnpm install.
playwright.config.ts imports nxE2EPreset from the local @nx/playwright; eslint.config.mjs uses the local @nx/eslint-plugin flat configs.

Editing the local packages does not rebuild them automatically — this workspace's graph cannot see them. Re-run the postinstall command (or pnpm nx run-many -t build -p vite react playwright eslint eslint-plugin at the repo root) after changing plugin sources.

Targets

Targets are inferred by the plugins registered in this directory's nx.json:

Target	Inferred by	What it does
`build`	`@nx/vite/plugin`	`vite build` → `dist/`
`serve`	`@nx/vite/plugin`	Vite dev server on port 4200
`preview`	`@nx/vite/plugin`	Serves the production build
`test`	`@nx/vitest`	Runs the Vitest unit tests
`e2e`	`@nx/playwright/plugin`	Runs the Playwright e2e tests
`lint`	`@nx/eslint/plugin`	Lints the project with ESLint

# From this directory
pnpm install        # also builds the linked local packages
nx build
nx test
nx serve
nx e2e
nx lint

The Playwright target needs browsers installed once: npx playwright install chromium.