[Frontend] Script and documentation to start a frontend dev env that works with all API endpoints

frontend/README.md

@@ -23,9 +23,17 @@ database.
 
 ### Using a real cluster as backend
 
-1. First configure your `kubectl` to talk to your kfp lite cluster.
-2. `npm run start:proxies` to start proxy servers that port forwards to your cluster.
-3. `npm start` to start a webpack dev server, it has already been configured to talk to aforementioned proxies.
+#### Common steps
+1. First configure your `kubectl` to talk to your KFP standalone cluster.
+2. `npm start` to start a webpack dev server, it is configured to proxy api requests to localhost:3001. The following step will start a proxy that handles api requests proxied to localhost:3001.
+
+#### Special step that depend on what you want to do
+| What to develop?        | Who handles API requests? | Script to run                                                  | Extra notes                                                        |
+|-------------------------|---------------------------|----------------------------------------------------------------|--------------------------------------------------------------------|
+| Client UI               | standalone deployment     | `NAMESPACE=kubeflow npm run start:proxy-standalone`            |                                                                    |
+| Client UI + Node server | standalone deployment     | `NAMESPACE=kubeflow npm run start:proxy-standalone-and-server` | You need to rerun the script every time you edit node server code. |
+
+TODO: figure out and document how to use a Kubeflow deployment to develop UI.
 
 **Production Build:**
 You can do `npm run build` to build the frontend code for production, which

frontend/package.json

@@ -48,7 +48,8 @@
     "mock:api": "ts-node-dev -O '{\"module\": \"commonjs\"}' mock-backend/mock-api-server.ts 3001",
     "mock:server": "node server/dist/server.js build",
     "postinstall": "cd ./server && npm i && cd ../mock-backend && npm i && cd ../src/generated/src/apis/metadata && npm i",
-    "start:proxies": "./start-proxies.sh",
+    "start:proxy-standalone": "./start-proxy-standalone.sh",
+    "start:proxy-standalone-and-server": "./start-proxy-standalone-and-server.sh",
     "start": "react-scripts-ts start",
     "test": "react-scripts-ts test --env=jsdom",
     "test:coverage": "npm test -- --env=jsdom --coverage",

frontend/start-proxies.sh → frontend/start-proxy-standalone-and-server.sh

@@ -46,6 +46,6 @@ popd
 # localhost:9090 port forwards to metadata_envoy pod.
 
 echo "Starting to port forward backend apis..."
-kubectl port-forward -n kubeflow $METADATA_ENVOY_POD 9090:9090 &
-kubectl port-forward -n kubeflow $PIPELINE_API_POD 3002:8888 &
+kubectl port-forward -n $NAMESPACE $METADATA_ENVOY_POD 9090:9090 &
+kubectl port-forward -n $NAMESPACE $PIPELINE_API_POD 3002:8888 &
 ML_PIPELINE_SERVICE_PORT=3002 npm run mock:server 3001

frontend/start-proxy-standalone.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+set -e
+
+NAMESPACE=${NAMESPACE:-kubeflow}
+
+cat << EOF
+===============================================================================
+This script helps set up a dev env for client side UI only. It uses a real KFP standalone deployment for api requests.
+
+What this does:
+1. It detects pipeline ui pod name in a KFP standalone deployment.
+2. Port forward pipeline ui pod to localhost:3001 (Pipeline UI dev env is configured to redirect all api requests to localhost:3001)
+===============================================================================
+EOF
+
+echo "Detecting pipeline ui pod name..."
+PIPELINE_UI_POD=($(kubectl get pods -n $NAMESPACE -l app=ml-pipeline-ui -o=custom-columns=:.metadata.name --no-headers))
+if [ -z "$PIPELINE_UI_POD" ]; then
+  echo "Couldn't get pipeline ui pod in namespace '$NAMESPACE', double check the cluster your kubectl talks to and your namespace is correct."
+  echo "Namespace can be configured by setting env variable NAMESPACE. e.g. '$ NAMESPACE=kfp npm run start:proxy-standalone'"
+  exit 1
+fi
+echo "Pipeline UI pod is $PIPELINE_UI_POD"
+
+echo "Starting to port forward frontend server in a KFP standalone deployment to respond to apis..."
+kubectl port-forward -n $NAMESPACE $PIPELINE_UI_POD 3001:3000