Project: kpt (Provisioning / Automation & Configuration)
File: porch-ui-installation.md

You can access the Configuration as Data UI UI either by running the UI on a cluster or integrating the UI into an existing Backstage installation. To access the Configuration as Data UI, you will need: installed on a Kubernetes cluster targeting the Kubernetes cluster with Porch installed installed This setup assumes that you have a GKE cluster up and running with Porch installed, and that your current kube context is set to that GKE cluster. We would welcome contributions or feedback from people that have set this up in other clouds outside of GKE. First, create a namespace called `backstage`: ```sh kubectl create namespace backstage ``` Second, Google OAuth Credentials will need to be created to allow the UI to use Google authentication to authenticate users with the UI and to the Kubernetes API Server. To create the Google OAuth Credentials: Sign in to the Select or create a new project from the dropdown menu on the top bar Navigate to Click Create Credentials and choose `OAuth client ID` Configure an OAuth consent screen, if required For scopes, select `openid`, `auth/userinfo.email`, `auth/userinfo.profile`, and `auth/cloud-platform`. Add any users that will want access to the UI if using External user type Set Application Type to `Web Application` with these settings: `Name`: Config as Data UI (or any name you prefer) `Authorized JavaScript origins`: http://localhost:7007 `Authorized redirect URIs`: http://localhost:7007/api/auth/google/handler/frame Click Create Copy the Client ID and Client secret displayed We will now need to add the credentials as a secret to the cluster. Be sure to replace the PLACEHOLDER values prior to executing: ```sh kubectl create secret generic -n backstage cad-google-oauth-client --from-literal=client-id=CLIENTIDPLACEHOLDER --from-literal=client-secret=CLIENTSECRETPLACEHOLDER ``` Next, find a published image in the . For this example, we will use `gcr.io/kpt-dev/kpt-backstage-plugins/backstage-plugin-cad:v0.1.3`. Now, run the following command to set up the backstage deployment and service. Change the image name and tag in the `newName` and `newTag` flags in the below `kpt fn eval` command to the ones you would like to use: ```sh echo " apiVersion: apps/v1 kind: Deployment metadata: name: backstage namespace: backstage spec: replicas: 1 selector: matchLabels: app: backstage template: metadata: labels: app: backstage spec: containers: name: backstage image: backstage ports: name: http containerPort: 7007 env: name: AUTHGOOGLECLIENT_ID valueFrom: secretKeyRef: name: cad-google-oauth-client key: client-id optional: false name: AUTHGOOGLECLIENT_SECRET valueFrom: secretKeyRef: name: cad-google-oauth-client key: client-secret optional: false apiVersion: v1 kind: Service metadata: name: backstage namespace: backstage spec: selector: app: backstage ports: name: http port: 7007 targetPort: http " | kpt fn eval "" -o unwrap --image set-image:v0.1.0 -- \ name=backstage newName=gcr.io/kpt-dev/kpt-backstage-plugins/backstage-plugin-cad newTag=v0.1.3 | \ kubectl apply -f - ``` In your cluster, confirm the backstage deployment is ready and available: ```sh kubectl get deployment -n backstage backstage ``` Forward port 7007 locally to access backstage. It is important that you do not map this port to another port as this will cause Backstage and the OAuth client to fail. ```sh kubectl port-forward --namespace=backstage svc/backstage 7007 ``` Open the plugin by browsing to `localhost:7007/config-as-data`. On the plugin, you will need to sign in to your Google account so that the plugin can access your GKE cluster. This setup is intended for those installing the plugin into existing backstage deployments. The Configuration as Data UI can be added to an existing application by following the instructions on the .