The dashboard is the main UI component of the Kubeapps project. Written in JavaScript, the dashboard uses the React JavaScript library for the frontend.
- Git
- Node
- Yarn
- Kubernetes cluster
- Kind is recommended.
- kubectl
- Docker
- Telepresence
- Telepresence is not a hard requirement, but is recommended for a better developer experience
git clone --recurse-submodules https://github.com/vmware-tanzu/kubeapps $KUBEAPPS_DIR
The dashboard application source is located under the dashboard/
directory of the repository.
cd $KUBEAPPS_DIR/dashboard
Kubeapps is a Kubernetes-native application. To develop and test Kubeapps components we need a Kubernetes cluster with Kubeapps already installed. Follow the Kubeapps installation guide to install Kubeapps in your cluster.
Telepresence is a local development tool for Kubernetes microservices. As the dashboard is a service running in the Kubernetes cluster we use telepresence to proxy requests to the dashboard running in your cluster to your local development host.
First install the dashboard dependency packages:
yarn install
Next, create a telepresence
shell to swap the kubeapps-internal-dashboard
deployment in the kubeapps
namespace, forwarding local port 3000
to port 8080
of the kubeapps-internal-dashboard
pod.
telepresence --namespace kubeapps --method inject-tcp --swap-deployment kubeapps-internal-dashboard --expose 3000:8080 --run-shell
NOTE: If you encounter issues getting this setup working correctly, please try switching the telepresence proxying method in the above command to
vpn-tcp
. Refer to the telepresence docs to learn more about the available proxying methods and their limitations. If this doesn't work you can use the Telepresence alternative.
Finally, launch the dashboard within the telepresence shell:
yarn run start
NOTE: The commands above assume you install Kubeapps in the
kubeapps
namespace. Please update the filedashboard/public/config.json
if you are using a different namespace.
As an alternative to using Telepresence you can use the default Create React App API proxy functionality.
First add the desired host:port to the package.json:
- }
+ },
+ "proxy": "http://127.0.0.1:8080"
NOTE: Add the proxy
key:value
to the end of thepackage.json
. For convenience, you can change thehost:port
values to meet your needs.
To use this a run Kubeapps per the getting-started documentation. This will start Kubeapps running on port 8080
.
Next you can launch the dashboard.
yarn run start
You can now access the local development server simply by accessing the dashboard as you usually would (e.g. doing a port-forward or accessing the Ingress URL).
In some cases, the 'Create React App' scripts keep listening on the 3000 port, even when you disconnect telepresence. If you see that localhost:3000
is still serving the dashboard, even with your telepresence down, check if there is a 'Create React App' script process running (ps aux | grep react
) and stop it.
Run the following command within the dashboard directory to start the test runner which will watch for changes and automatically re-run the tests when changes are detected.
yarn run test
NOTE: macOS users may need to install watchman (https://facebook.github.io/watchman/).