ContributingSpecific Contribution Guides

Contributing to the Frontend

This guide will help you get started with contributing to the Opik frontend.

Before you start, please review our general Contribution Overview and the Contributor License Agreement (CLA).

Project Structure

The Opik frontend is a React application located in the apps/opik-frontend directory of the comet-ml/opik repository. It provides the user interface for interacting with the Opik platform.

Setting Up Your Development Environment

We provide multiple ways to develop the frontend. Choose the approach that best fits your workflow:

Best for rapid development with hot reload

This mode runs the frontend as a local process with Vite’s dev server, providing instant hot reload when you save files:

$# From repository root - restart everything
>scripts/dev-runner.sh
>
># Or just start (faster if already built)
>scripts/dev-runner.sh --start

Access the UI at http://localhost:5174 (Vite dev server with hot reload).

Benefits:

  • Instant hot reload on file changes
  • Fast rebuilds
  • Full TypeScript type checking and linting
  • Easy debugging with browser dev tools

Prerequisites:

  • Node.js 18+ with npm. You can download it from nodejs.org.
  • Java Development Kit (JDK) 21 (for backend)
  • Apache Maven 3.8+ (for backend)

For comprehensive documentation on all development modes, troubleshooting, and advanced workflows, see our Local Development Guide.

4. Code Quality Checks

Before submitting a Pull Request, please ensure your code passes the following checks:

Linting

$# From repository root
>scripts/dev-runner.sh --lint-fe

Type Checking and Unit Tests

Run these commands from the apps/opik-frontend directory:

$cd apps/opik-frontend
>
>npm run typecheck # TypeScript type checking
>npm run test      # Unit tests for utilities and helpers

5. Submitting a Pull Request

After implementing, commit your changes and open a Pull Request against the main branch of the comet-ml/opik repository.