pipelines/frontend

Kubeflow Pipelines Frontend

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

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

[!Note] MAC users have reported positive experiences using Docker + Colima when using Kind environments. Consider using a similar setup if you are on a MAC and encountering issues with Docker VM.

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 and install your NPM dependencies:

cd ${WORKING_DIRECTORY}/frontend
npm ci

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 something like the following output:

You can now view pipelines-frontend in the browser.

  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.

Contributing

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