Skip to main content

Frontend Applications

The Mina Rust node ecosystem includes several web-based frontend applications, each serving a specific purpose in the network.

Components​

Node Dashboard​

A comprehensive web interface for monitoring and interacting with your Mina Rust node. View real-time blockchain state, network activity, and node metrics through an intuitive dashboard.

Leaderboard​

Track community participation in testnets with a competitive leaderboard system. Previously used to monitor and rank testnet participants based on their contributions to network stability and block production.

WebNode​

Run a Mina node directly in your web browser using WebAssembly. This experimental feature enables block production without installing native software, pushing the boundaries of decentralized infrastructure.

Prerequisites​

All frontend applications are built with Angular and require Node.js to be installed.

Platform Compatibility

These instructions are tested and compatible with:

  • Ubuntu: 22.04, 24.04
  • macOS: macOS-13, macOS-14, macOS-latest

Install Node.js​

scripts/frontend/install-nodejs-linux.sh
# Install nvm (if not already installed)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

# Source nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# Install Node.js
nvm install 23.1.0
nvm use 23.1.0
nvm alias default 23.1.0

# Verify installation
echo "Node.js version: $(node --version)"
echo "npm version: $(npm --version)"

echo "Node.js installation complete!"

Install Angular CLI​

scripts/frontend/install-angular-cli.sh
# Install Angular CLI globally
npm install -g @angular/cli@19.2.14

# Verify installation
npx ng version

echo "Angular CLI installation complete!"

Environment configurations​

The frontend applications support multiple environment configurations that determine network endpoints, build optimizations, and feature sets:

Available environments​

  • local - Development configuration for local node testing

    • Connects to localhost:3085 for GraphQL API
    • Debug features enabled

  • production - Production network configuration

    • Connects to mainnet or production endpoints
    • Fully optimized builds with minification
    • Error reporting and analytics enabled

  • producer - Block producer specialized configuration

    • Additional monitoring dashboards
    • Producer-specific metrics and tools
    • Enhanced performance monitoring

  • webnode - WebAssembly node configuration

    • Enables WebRTC peer-to-peer networking
    • Integrates with browser-based WASM node
    • Automatic circuit file management
    • Optimized for in-browser execution

  • fuzzing - Testing and fuzzing configuration

    • Special build for automated testing
    • Enhanced test instrumentation
    • Mock data and test endpoints

Using environments​

Environments are specified during build:

# Local development
make build-local

# Production deployment
make build-production

# WebNode deployment
make build-webnode

Or via Docker:

# Specify environment at runtime (REQUIRED)
docker run -p 4200:80 -e MINA_FRONTEND_ENVIRONMENT=local mina-frontend
Environment Variable Required

The MINA_FRONTEND_ENVIRONMENT variable is mandatory when running the Docker container. The container will exit with an error if this variable is not set.

Testing dependencies​

Cypress end-to-end testing​

The frontend applications use Cypress for end-to-end testing. Cypress requires additional system dependencies to run browser automation tests.

scripts/frontend/install-cypress-deps-ubuntu-22-04.sh
# Install Cypress dependencies for Ubuntu 22.04
# These packages are required for running Cypress end-to-end tests

sudo apt-get update
sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
  libnss3 libxss1 libasound2 libxtst6 xauth xvfb
Cypress Dependencies

These dependencies are required for:

  • Running Cypress in headless mode (CI/CD environments)
  • Displaying the Cypress Test Runner GUI locally
  • Browser automation and screenshot capabilities

Note for macOS users: Cypress typically works out of the box on macOS with system browsers. No additional dependencies need to be installed.

Next Steps​

With Node.js and Angular CLI installed, you're ready to build and run any of the frontend applications. Select a component above to learn about its specific features and configuration.