# Run Web

> Build and serve the notes app as React Native Web, and run its Playwright end-to-end test. Use when running, serving, or building the web edition, or running the web e2e.

- Skill: `vortiago/run-web` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vortiago/run-web`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vortiago/run-web/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Vortiago (https://skillmd.com/u/vortiago)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vortiago/run-web

---


# Run on web

React Native Web (built by Vite) served same-origin by the same `HttpListener` backend that answers
`/api`, on `http://127.0.0.1:5001`. Prereqs: .NET 10, Node 22, and a free `:5001` (the iOS simulator
shares the host loopback, so stop a running sim app first).

## Serve it

`./scripts/run-web.sh` builds the RN-Web bundle into `src/Backend.Web/wwwroot/` and runs the backend.
Done when `http://127.0.0.1:5001` shows the notes screen and an added note survives a reload.

By hand: `cd src/Client && npm run build:web`, then `dotnet run --project src/Backend.Web`.

## End-to-end test

`cd src/Client && npx playwright test`. Playwright starts the backend itself (see `playwright.config.ts`)
and drives the round-trip (empty -> add -> reload-persists). Done when all 3 tests pass.

## Drive or screenshot the running UI

RN `testID` becomes a `data-testid`, so Playwright locators work directly: `getByTestId('notes.text.input')`,
`getByTestId('notes.add.button')`, then `page.screenshot({ path })`.