frontend

Frontend

Kubetail frontend website

Overview

The kubetail frontend website is a React-based static website that's designed to query the kubetail backend server and display results to the user in a clean, easy-to-use interface. Kubernetes-related requests to the backend server's GraphQL endpoint are made using Apollo Client and authentication-related requests to the REST API are made using simple fetch() requests. The code is written in TypeScript and is generally written to be as type-safe as possible. In development, the application uses vite and in production, it's deployed as a static website hosted by the backend server.

Quickstart

First, make sure the backend server is running. Next, install the dependencies and run the website using the development server:

pnpm install
pnpm dev

Now you can access the site at: http://localhost:5173

GraphQL

This project uses graphql-codegen to generate TypeScript definitions for its internal GraphQL queries. To run the code generator:

pnpm graphql-codegen

Test

This project uses vitest for testing. To run the test suite:

pnpm test

Lint

This project uses TypeScript and enforces the Airbnb JavaScript styleguide using eslint. To run the linter:

pnpm lint

Build

To package the application into a standalone static website run the build step:

pnpm build

This will place the static assets in the dist directory.