Environment:Datahub project Datahub Frontend Build

Knowledge Sources	DataHub Developer Guide
Domains	Infrastructure, Frontend
Last Updated	2026-02-09 17:00 GMT

Overview

Node.js 22 and Yarn runtime environment required for building and developing the DataHub React frontend application.

Description

This environment provides the JavaScript/TypeScript toolchain for the datahub-web-react module, which is the primary user interface for DataHub. It uses Vite 6 as the build tool, React with TypeScript, Apollo Client for GraphQL communication, and Ant Design for the component library. The build requires substantial memory allocation due to the size of the application (Node heap size set to 5 GB for standard builds, 8 GB for Storybook).

Usage

Use this environment for frontend development, building the React application, and running frontend tests. It is also required for formatting Markdown, GraphQL, and YAML files via Prettier (accessed through Gradle tasks).

System Requirements

Category	Requirement	Notes
OS	Linux, macOS, Windows	Cross-platform
Node.js	Version 22.x (specific major version)	Must be 22.x, not just "latest"
Yarn	>= 1.22	Classic Yarn (v1)
RAM	8+ GB	Node heap needs 5-8 GB for builds
Disk	5+ GB	`node_modules` and build artifacts

Dependencies

System Packages

nodejs 22.x
yarn >= 1.22

Key NPM Packages (managed by yarn)

vite ^6
react ^18
typescript ^5
@apollo/client (GraphQL)
antd (UI components)
vitest (testing)
prettier (formatting)

Credentials

No credentials required for frontend development. The frontend connects to GMS at runtime:

REACT_APP_GMS_URL: Override GMS backend URL during development (optional)

Quick Install

# Install Node.js 22 and Yarn
# Using mise (recommended):
# mise.toml defines node=22

# Or manually:
nvm install 22
npm install -g yarn

# Install dependencies and start dev server
cd datahub-web-react
yarn install
yarn start

# Build for production
yarn build

Code Evidence

Node memory allocation from datahub-web-react/package.json:114-115:

"build": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' vite build",
"buildDev": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' vite build --mode development",

Storybook memory allocation from datahub-web-react/package.json:131:

"build-storybook": "NODE_OPTIONS='--max-old-space-size=8192 --openssl-legacy-provider' storybook build"

Node.js requirement from docs/developers.md:12:

- Node 22.x

Common Errors

Error Message	Cause	Solution
`FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory`	Node heap too small	Set `NODE_OPTIONS='--max-old-space-size=5120'` before building
`ERR_OSSL_EVP_UNSUPPORTED`	OpenSSL 3.x incompatibility with legacy algorithms	Add `--openssl-legacy-provider` to NODE_OPTIONS (already in package.json scripts)
Prettier formatting mismatch in CI	Used `npx prettier` directly instead of Gradle task	Use `./gradlew :datahub-web-react:mdPrettierWrite` instead

Compatibility Notes

Node.js version: Must be exactly major version 22. Other versions may cause build failures or test instabilities.
OpenSSL Legacy Provider: Required due to dependencies using legacy OpenSSL algorithms. Already configured in package.json build scripts.
Yarn Classic: Uses Yarn v1 (classic), not Yarn Berry (v2+). Do not upgrade to Yarn 2+.

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment