Kubernetes Vite + React Example App

ℹ️ This project is a part of GitOps workflow example using Flux2 which includes Kubernetes manifests for NGINX Ingress Controller as well as handles Continuous Delivery.

A simple example Single-page Application for Kubernetes using Vite + React.

Table of Contents

• Overview
• Features
  • Dockerfile optimization
  • SHA256 digest pinned Docker image tags
  • Docker image and npm dependency updates
  • Vulnerability scanning
  • Static file Caching
• Kustomize configuration
• Local development

🔍 Overview

In a nutshell the application provides a user interface for displaying most popular GitHub repositories which the REST API offers.

🚀 Features

• Optimized Dockerfile using multi-stage builds
• SHA pinned Docker image tags with automated update using Renovate
• Automated vulnerability scan of the Docker image and npm dependencies using Trivy
• YAML validation using yamllint
• Static file Caching utilizing long term caching techniques using serve
• Kubernetes configuration customization using Kustomize
• Network traffic flow control using Network Policies

Dockerfile optimization

• In order to keep the Docker image size optimal a multi-stage builds is used
• The application is bundled and build into production mode as well as serve is installed in the base stage.
• Only the dist folder and serve related files are copied from the base state to release stage in order to have minimum sized layers
• Only the layers from the release stage are pushed when the Docker image is build

SHA256 digest pinned Docker images

SHA256 digest pinning is used to achieve reliable and reproducable builds. Using digest as the image's primary identifier instead of using a tag makes sure that specific version of the image is used.

Docker image and npm dependency updates

In order to receive Docker image and npm dependency updates Renovate is used to create a pull request when:

• Newer digest from chainguard/node-lts is available on Docker Hub
• Minor or Patch update of a npm dependency is available

Vulnerability scanning

In order to regularly scan Docker image and npm dependencies for vulnerabilities a scheduled job is used to build the Docker image and scan it's content using Trivy.

Static file Caching

When building Create React App it makes sure that JavaScript and CSS files inside dist/assets folder will have a unique hash appended to the filename which makes possible to use long term caching techniques:

• Cache-Control: max-age=31536000 for dist/assets
• Cache-Control: no-cache for index.html

are used to avoid browser re-downloading the assets if the file contents haven't changed and to make sure that updated index.html is always used. The headers are defined in serve.json.

📝 Kustomize configuration

Kustomize configuration is based on Directory Structure Based Layout in order to use staging and production environments with different configuration.

├── base
│   ├── deployment.yaml
│   ├── hpa.yaml
│   ├── ingress.yaml
│   ├── kustomization.yaml
│   ├── netpol-egress.yaml
│   ├── netpol-ingress.yaml
│   ├── pdb.yaml
│   └── service.yaml
└── staging
    ├── hpa-patch.yaml
    ├── kustomization.yaml
    ├── namespace.yaml
    └── pdb-patch.yaml

⌨️ Local development

Start the app in development mode which will automatically reload if you make changes to the code:

$ pnpm run dev