Environment:Arize ai Phoenix Frontend Node 22
| Knowledge Sources | |
|---|---|
| Domains | Infrastructure, Frontend |
| Last Updated | 2026-02-14 06:00 GMT |
Overview
Node.js 22+ frontend environment with pnpm package manager, React 19, Relay GraphQL, and TypeScript 5.4 for the Phoenix UI.
Description
This environment provides the frontend development and build context for the Phoenix web UI. The UI is a React 19 single-page application built with Vite, using Relay for GraphQL data fetching, React Aria for accessible components, and Recharts for data visualization. The `app/` directory enforces pnpm as the sole package manager via a preinstall script.
The `js/` directory contains a separate pnpm workspace with TypeScript packages (phoenix-otel, phoenix-client, phoenix-evals, phoenix-mcp, phoenix-cli, phoenix-config) that are published to npm.
Usage
Use this environment for frontend development: running the dev server, building the production UI bundle, running Playwright E2E tests, and building the Relay GraphQL schema.
System Requirements
| Category | Requirement | Notes |
|---|---|---|
| Node.js | >= 22 | See .nvmrc file |
| Package Manager | pnpm 10.2.0 | Enforced by preinstall script in app/ |
| Disk | 2GB+ | For node_modules and build artifacts |
Dependencies
Core Framework
- `react` 19.2.0
- `react-dom` 19.2.0
- `react-relay` ^20.1.1
- `relay-runtime` ^20.1.1
- `react-router` ^7.12.0
UI Components
- `react-aria` ^3.44.0
- `react-aria-components` ^1.13.0
- `recharts` ^3.1.0
- `@tanstack/react-table` ^8.21.3
- `zustand` ^4.5.7
Build Tools
- `vite` ^6.4.1
- `typescript` ~5.4.5
- `relay-compiler` ^20.1.1
- `babel-plugin-react-compiler` 1.0.0
Testing
- `vitest` ^4.0.10
- `@playwright/test` ^1.56.1
Credentials
- `CHROMATIC_PROJECT_TOKEN`: For visual regression testing with Chromatic (optional)
- `PHOENIX_ENABLE_REACT_COMPILER`: Enable React Compiler (True/False)
Quick Install
# Frontend setup
cd app
pnpm install
pnpm run build
# Development with hot reload
pnpm dev
# TypeScript packages setup
cd js
pnpm install
pnpm run -r build
Code Evidence
Node.js engine requirement from `app/package.json:157-159`:
"engines": {
"node": ">=22"
}
pnpm enforcement from `app/package.json:127`:
"preinstall": "npx only-allow pnpm"
Package manager version from `app/package.json:160`:
"packageManager": "pnpm@10.2.0"
Common Errors
| Error Message | Cause | Solution |
|---|---|---|
| `Only pnpm is allowed` | Using npm or yarn instead of pnpm | Use `pnpm install` instead |
| `Node version < 22` | Node.js too old | Install Node.js 22+ via nvm |
| `relay-compiler` errors | GraphQL schema out of date | Run `pnpm run build:relay` |
Compatibility Notes
- Package Manager: pnpm is strictly enforced in `app/`. Using npm or yarn will fail at the preinstall step.
- React 19: The UI uses React 19 with the React Compiler (babel-plugin-react-compiler 1.0.0).
- Security Overrides: Several dependency overrides are configured in package.json to patch known vulnerabilities in transitive dependencies (braces, esbuild, vite, @babel/runtime, @babel/helpers).
Related Pages
This is a leaf environment node for the frontend. No Implementation pages currently reference it directly as they focus on the Python backend.