Environment:Risingwavelabs Risingwave Dashboard Node Environment

Knowledge Sources	RisingWave Dashboard README
Domains	Infrastructure, Frontend, Monitoring
Last Updated	2026-02-09 08:00 GMT

Overview

Node.js 20 environment with Next.js 14, React 18, and TypeScript 5.4 for building the RisingWave web dashboard that visualizes streaming fragment graphs, cluster state, and relation catalogs.

Description

This environment provides the frontend web development stack for the RisingWave dashboard. The dashboard is a Next.js application exported as static HTML that communicates with the RisingWave meta node HTTP API on port 5691. It uses Chakra UI for components, D3 and Dagre for graph visualization, Recharts for metrics charts, and Monaco Editor for SQL editing. The build output is embedded into the RisingWave binary at compile time via src/meta/dashboard/build.rs.

Usage

Use this environment for developing or building the RisingWave web dashboard. Required when modifying any UI components, graph visualizations, or API integration code in the dashboard/ directory.

System Requirements

Category	Requirement	Notes
OS	Linux, macOS, or Windows	Cross-platform via Node.js
Hardware	No special requirements	Standard development machine
RAM	4GB+	Node.js build can be memory-intensive
Network	Access to npm registry	For dependency installation

Dependencies

Runtime

• node = 20 (pinned in .node-version)
• npm (bundled with Node.js 20)

Key NPM Packages

• next >= 14.2.32 (static export mode)
• react >= 18.2.0
• react-dom >= 18.2.0
• typescript = 5.4.2
• @chakra-ui/react >= 2.3.1 (UI framework)
• d3 >= 7.6.1 (data visualization)
• dagre >= 0.8.5 (graph layout)
• recharts >= 2.3.2 (charts)
• @monaco-editor/react >= 4.6.0 (code editor)
• @hpcc-js/wasm-graphviz >= 1.7.0 (Graphviz rendering)
• ts-proto >= 1.169.1 (protobuf TypeScript bindings)

Development Tools

• eslint >= 8.45.0
• prettier >= 2.7.1

Credentials

No credentials required. The dashboard connects to the RisingWave meta node API at the URL configured in the dashboard settings page (default: http://localhost:5691).

Quick Install

# Install Node.js 20 (via nvm)
nvm install 20
nvm use 20

# Install dependencies
cd dashboard && npm install

# Development server (port 3000)
npm run dev

# Production build (static export to ./out)
npm run build

Code Evidence

Node.js version requirement from dashboard/.node-version line 1:

20

Static export configuration from dashboard/next.config.js lines 21-22:

output: "export",
trailingSlash: true,

TypeScript target from dashboard/tsconfig.json line 3:

{
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Common Errors

Error Message	Cause	Solution
Node.js version mismatch	Not using Node.js 20	nvm use 20 or install Node.js 20
Cannot connect to meta node	RisingWave not running on port 5691	Start RisingWave cluster first with ./risedev d
ENOMEM during build	Insufficient memory for Next.js build	Increase available memory or use NODE_OPTIONS=--max-old-space-size=4096

Compatibility Notes

• Embedded Build: The dashboard is built and embedded into the Rust binary during cargo build via src/meta/dashboard/build.rs. Node.js must be available at Rust build time.
• Static Export: The dashboard runs as static HTML; no server-side rendering at runtime.
• Mock Server: A mock server (npm run mock-server) is available for development without a live cluster.

Related Pages

• Implementation:Risingwavelabs_Risingwave_Dashboard_Streaming_API