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.

Web Node​

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​

We recommend using the latest Node.js version specified in the .nvmrc file at the root of the repository. You can use a Node.js version manager like nvm to easily switch to the correct version.

For more information on how to install Node.js, please refer to the official Node.js documentation.

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 (see web node docs for details)

    • 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

# Web node deployment
make build-webnode

Or via Docker:

# Build the image locally
make docker-build-frontend

# Specify environment at runtime (REQUIRED)
# 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>
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.