Skip to main content

Node Dashboard

The Node Dashboard is a comprehensive web interface for monitoring and interacting with your Mina Rust node. Built with Angular, it provides real-time insights into your node's operation and the broader network state.

Features​

  • Real-time node monitoring - View node status, blockchain state, and network activity
  • Block explorer - Browse blocks, transactions, and accounts
  • Network visualization - See peer connections and network topology
  • SNARK worker monitoring - Track SNARK work production and verification
  • Transaction pool viewer - Monitor pending transactions
  • Performance metrics - Resource usage and performance dashboards

Prerequisites​

Ensure you have Node.js and Angular CLI installed by following the Frontend Prerequisites guide.

Quick start​

Installation​

Navigate to the frontend directory and install dependencies:

scripts/frontend/install-dependencies.sh
cd frontend
make install-deps

Development server​

Start the development server with hot-reload:

scripts/frontend/start-development.sh
cd frontend
make start

This will:

  1. Install any missing dependencies
  2. Start the Angular development server
  3. Open the application in your browser at http://localhost:4200

Build configurations​

The frontend supports multiple build configurations for different environments:

# Local configuration (connects to local node)
make build-local

# Mobile-accessible development server
make start-dev-mobile

Production builds​

For optimized production deployments:

scripts/frontend/build-production.sh
cd frontend
make build-production

Production build with Sentry error tracking:

make build-production-sentry

Specialized configurations​

# Block producer dashboard
make build-producer

# Fuzzing test interface
make build-fuzzing

# WebNode integration
make build-webnode

Configuration​

Environment files​

The frontend uses environment-specific configuration files located in src/assets/environments/:

For the most current environment configuration files, see the frontend/src/assets/environments directory in the develop branch.

Development workflow​

Code formatting​

The project uses Prettier for consistent code formatting:

scripts/frontend/format-code.sh
cd frontend
make prettify

Testing​

Run the Cypress test suite:

scripts/frontend/run-tests.sh
cd frontend
make test-headless

For interactive testing:

# Interactive test runner
make test

Building for production​

Create an optimized production build:

make build-production

Serving production builds​

Test production builds locally:

make build-production
make start-bundle

Docker deployment​

The Node Dashboard can be deployed using Docker with environment-specific builds.

Environment configurations​

The MINA_FRONTEND_ENVIRONMENT variable determines how the frontend is built and configured:

  • local - Local development environment connecting to localhost:3085. Optimized for development with a local node instance.

  • production - Production environment with full optimization. Connects to production network endpoints with minification and performance optimizations.

  • webnode - WebNode configuration for browser-based Mina node operation. Enables WASM integration and WebRTC networking for in-browser execution. See the web node documentation for details.

Build Docker image​

# Build the Docker image (from project root)
make docker-build-frontend

Run with Docker​

# Run Node Dashboard with local configuration (connects to localhost:3085)
# Note: Replace <TAG> with the tag generated by the build (e.g., git commit hash)
docker run -p 4200:80 -e MINA_FRONTEND_ENVIRONMENT=local o1labs/mina-rust-frontend:<TAG>

# Run Node Dashboard with production configuration (production endpoints)
docker run -p 4200:80 -e MINA_FRONTEND_ENVIRONMENT=production o1labs/mina-rust-frontend:<TAG>

# Run Node Dashboard with webnode configuration (browser-based node operation)
docker run -p 4200:80 -e MINA_FRONTEND_ENVIRONMENT=webnode o1labs/mina-rust-frontend:<TAG>
Docker Build Process

The Docker image builds the frontend at container startup based on the MINA_FRONTEND_ENVIRONMENT variable. This allows a single Docker image to serve different configurations.

Project structure​

frontend/
├── src/
│   ├── app/              # Angular application code
│   │   ├── core/         # Core services and utilities
│   │   ├── shared/       # Shared components and modules
│   │   ├── features/     # Feature modules
│   │   └── layout/       # Layout components
│   ├── assets/           # Static assets
│   │   └── environments/ # Environment configurations
│   ├── styles/           # Global styles
│   └── index.html        # Main HTML template
├── cypress/              # E2E test specifications
├── scripts/              # Build and deployment scripts
├── Makefile              # Build automation
├── angular.json          # Angular CLI configuration
├── package.json          # Node.js dependencies
└── tsconfig.json         # TypeScript configuration

Features​

Real-time updates​

The frontend maintains WebSocket connections for real-time updates:

  • Block production events
  • Network peer changes
  • Transaction pool updates
  • SNARK work completion