Kubeflow Pipelines Frontend

This section of the codebase contains the Kubeflow Pipelines (KFP) Frontend.

Current Stack

• React 19 with TypeScript on Vite 7
• MUI v5 with Emotion
• TanStack Query v5
• React Router v5
• Vitest with Testing Library v16 for UI tests
• Vitest for frontend server tests
• Storybook 10 for component development

Quick Start Development

This guide will get you started with development on KFP standalone mode.

Prerequisites

You will need the following installed in your environment:

• Docker
• Kubectl
• Kind
• Kustomize
• Node version specified in the .nvmrc

Deploy KFP

Clone and then deploy KFP:

git clone https://github.com/kubeflow/pipelines.git ${WORKING_DIRECTORY}
cd ${WORKING_DIRECTORY}
make -C backend kind-cluster-agnostic

The above command will deploy KFP in standalone mode. You can access the KFP UI by port-forwarding the KFP UI Kubernetes Service:

kubectl -n kubeflow  port-forward svc/ml-pipeline-ui 3000:80

Navigate to http://127.0.0.1:3000 to view the UI. You will see something like the following:

Try uploading and running a pipeline and confirm it works! You can use one of the already uploaded templates. You can also follow the KFP docs for instructions on how to write and submit a pipeline. You can use http://127.0.0.1:3000 as your Client(host=...) value.

Local Development

Now that you have had a chance to check out the UI, we will now scale this UI down and run the UI ourselves locally.

Scale the UI down by running the following:

# End the port-forwarding by pressing ctrl+D in your terminal, then run:
kubectl -n kubeflow scale --replicas=0 deployment/ml-pipeline-ui

You can confirm that the previous http://127.0.0.1:3000 link no longer works.

Now navigate to the KFP frontend folder, install and build your NPM dependencies:

cd ${WORKING_DIRECTORY}/frontend
npm ci
npm run build

Now run the following:

npm run start:proxy-and-server

You should see the following output

Server listening at http://localhost:3001

Follow this link, and you should be directed to the KFP UI the same as before, except this time you are using the UI running in your local environment!

If you enjoy hot reloading when developing the client side React code, you can subsequently run the following command:

npm run start

You should see output indicating the Vite dev server is running, for example:

VITE v7.x ready in ...
➜  Local:   http://localhost:3000/
...

Follow this link, it should also take you to the same UI. The difference here is that whenever you change client side (React) code locally, you will automatically get the new changes in your browser without having to restart your server.

The local dev bootstrap runs under React Strict Mode. Vitest UI tests are configured to do the same through Testing Library's global reactStrictMode setting so direct render() calls match dev behavior. Production builds remain outside Strict Mode.

Visual Regression Testing

When making UI changes, use the smoke test tool to capture screenshots and generate side-by-side comparisons against a base branch. This catches layout regressions, styling issues, and unintended visual changes before they reach review.

Quick screenshot of your dev server

The fastest workflow — point the tool at your already-running npm start server:

node scripts/ui-smoke-test/smoke-test-runner.js --current-only --use-existing --url http://localhost:3000

Screenshots are saved to .ui-smoke-test/screenshots/pr/.

Compare your branch against master

The full workflow — detects changed backend components, ensures a Kind cluster, builds both frontends, captures screenshots from both, and generates a side-by-side comparison with diff percentages:

node scripts/ui-smoke-test/smoke-test-runner.js --compare master

If your PR only touches frontend code, the backend rebuild is auto-skipped since no backend components changed.

Compare someone else's PR

Fetch and test a PR you don't have checked out locally:

node scripts/ui-smoke-test/smoke-test-runner.js --compare master --pr 12756

Results are saved to .ui-smoke-test/screenshots/comparison/. See scripts/ui-smoke-test/README.md for the full command reference, troubleshooting, and architecture details.

Contributing

For a more comprehensive guide on contributing, please read CONTRIBUTING.md.