Rock8cloud Docs

Pure frontend application built with React 19, Vite 6, and TypeScript. Displays a space targets table by fetching data from a separate backend service. Intended as the frontend counterpart to any of the backend blueprints (Go, Java, Kotlin, PHP, Laravel).

Tech stack:

Layer	Technology
Framework	React 19
Build tool	Vite 6
Language	TypeScript 5
Web server	nginx (production)

The application runs on port 80. It renders a single page that calls /api/info and /api/targets on load and displays the results.

View on GitHub →

Project Structure

src/
├── main.tsx         # React entry point
├── App.tsx          # Main component: fetches /api/info and /api/targets, renders table
├── App.css          # Styles
└── index.css        # Global reset

nginx/
└── default.conf.template  # nginx config: proxies /api/ to BACKEND_URL, serves SPA

index.html           # Vite HTML entry
vite.config.ts       # Vite config with React plugin

Key design decisions:

App.tsx is the sole component. It uses useEffect + Promise.all to fetch both endpoints in parallel on mount. The connection indicator dot reflects the fetch status. To extend the UI, add state and fetch calls here, or decompose into child components.
In production (Docker), nginx serves the built static files and proxies /api/ requests to the backend. The backend host is configured via BACKEND_URL — nginx resolves it at request time using Docker's internal DNS (127.0.0.11), so the backend container does not need to be running when nginx starts.
In development, Vite's dev server proxies /api/ to the backend. Configure the target in vite.config.ts if needed.
The nginx/default.conf.template uses envsubst at container startup to substitute $BACKEND_URL. The CMD in the Dockerfile explicitly scopes the substitution to $BACKEND_URL only, to avoid accidentally replacing nginx variables like $uri.

Environment Variables

This is a frontend-only image. It has no database connection. The only variable needed at runtime is the backend address.

Variable	Required	Default	Description
`BACKEND_URL`	no	`localhost:8080`	`host:port` of the backend service, e.g. `java-service:8080`

In Kubernetes, set BACKEND_URL to the ClusterIP service name and port of the backend deployment.

Running Locally

With Docker Compose

The docker-compose.yml in this directory runs the frontend only. It expects a backend to be reachable at backend:8080 (adjust BACKEND_URL as needed, or add a backend service to the compose file).

docker compose up

With a backend template

To run the full stack locally, start any backend template (e.g. go/) with Docker Compose on its own network and point this frontend at it:

# in go/
docker compose up -d

# in react/ — point at the Go backend
BACKEND_URL=localhost:8080 docker compose up

Development mode (Vite dev server)

npm install
npm run dev

By default the dev server runs on http://localhost:5173. To proxy API calls to a local backend, add a proxy entry to vite.config.ts:

server: {
  proxy: {
    '/api': 'http://localhost:8080',
  },
},

React — Blueprint