Environment:ArroyoSystems Arroyo Webui Runtime

Knowledge Sources	Arroyo package.json
Domains	WebUI, Infrastructure
Last Updated	2026-02-08 08:00 GMT

Overview

React 18 TypeScript frontend runtime with Chakra UI, Vite build system, and Monaco editor for the Arroyo streaming SQL web console.

Description

This environment provides the Node.js toolchain and dependency set required to build and run the Arroyo web console (arroyo-console). The frontend is a single-page application built with React 18.3.1, TypeScript 5.8, and Vite 6.2.6. It communicates with the Arroyo REST API via generated OpenAPI TypeScript client types and uses SWR for data fetching with caching. The UI framework is Chakra UI 2.10 with Emotion styled-components. SQL editing is powered by Monaco Editor with SQL language support.

Usage

Use this environment for developing or building the Arroyo web UI. The compiled output is embedded into the Rust arroyo-api binary via rust_embed, so the Node.js runtime is only needed at build time, not at deployment time.

System Requirements

Category	Requirement	Notes
Node.js	18+	LTS recommended
Package Manager	pnpm	Used for dependency management
OS	Linux / macOS / Windows	Cross-platform development
Disk	1GB+	For node_modules and build artifacts

Dependencies

Key Runtime Libraries

react = 18.3.1 (UI framework)
react-dom = 18.3.1 (DOM rendering)
react-router-dom = 6.28.1 (client-side routing)
@chakra-ui/react = 2.10.7 (component library)
@emotion/react = 11.14.0 (CSS-in-JS styling)
@monaco-editor/react = 0.34.1 (SQL code editor)
swr = 2.3.3 (data fetching and caching)
openapi-fetch = 0.6.2 (type-safe API client)
reactflow = 11.11.4 (pipeline DAG visualization)
d3 = 7.9.0 (data visualization)
ag-grid-react = 31.3.4 (data tables)
formik = 2.4.6 (form management)
@rjsf/core = 5.24.8 (JSON Schema forms for connector config)

Build Tools

vite = 6.2.6 (build system and dev server)
typescript = 5.8 (type checking)
eslint = 8.57.1 (linting)
prettier = 2.8.8 (code formatting)

Quick Install

# Install pnpm (if not present)
npm install -g pnpm

# Install dependencies
cd webui
pnpm install

# Development server
pnpm dev

# Production build (output to webui/dist/)
pnpm build

Code Evidence

Package configuration from webui/package.json:

{
  "name": "arroyo-console",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "openapi": "openapi-typescript ..."
  }
}

The compiled web UI is embedded into the Rust binary via rust_embed in crates/arroyo-api/src/rest.rs:

#[derive(RustEmbed)]
#[folder = "../../webui/dist"]
struct Assets;

Compatibility Notes

Build-time only: The Node.js runtime is only required during development and CI builds. The production binary embeds the compiled assets.
API Endpoint Configuration: The web UI reads window.__ARROYO_BASENAME and window.__ARROYO_API_ENDPOINT injected at serve time for API URL configuration.
SPA Routing: All non-API, non-asset requests are served index.html for client-side routing.

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment