84 lines
2.8 KiB
Markdown
84 lines
2.8 KiB
Markdown
# Minecraft ComputerCraft API – Frontend
|
||
|
||
Vue 3 + TypeScript single page application for the
|
||
[ME System Monitor backend](../mc-cc-api-backend). It shows the live contents
|
||
of a Minecraft ME system over a websocket and renders per-item history charts.
|
||
|
||
## Features
|
||
|
||
- **Live view** over a websocket (`wss://…/api/ws/live`) – updates in real time.
|
||
- **Persistent filters** – text search, sort column/order and mod filter are
|
||
kept in `localStorage` and re-applied by the server on every update.
|
||
- **Item history** – clicking an item opens a detail page with a Chart.js line
|
||
chart plus current / min / max / change statistics.
|
||
- **Abbreviated numbers** – `12000 → 12k`, `43452542 → 43.45M`. The full value
|
||
is available as a tooltip.
|
||
- **HTTPS / WSS by default** via a self-signed certificate.
|
||
|
||
## Tech stack
|
||
|
||
| Concern | Choice |
|
||
| ---------- | ----------------------------------- |
|
||
| Framework | Vue 3 (`<script setup>`) + TypeScript |
|
||
| Build tool | Vite 6 |
|
||
| Routing | vue-router 4 |
|
||
| Charts | Chart.js 4 |
|
||
| Dev TLS | `@vitejs/plugin-basic-ssl` |
|
||
| Production | nginx (HTTPS, self-signed cert) |
|
||
|
||
## Quick start (development)
|
||
|
||
```bash
|
||
npm install
|
||
cp .env.example .env # adjust VITE_API_BASE / VITE_WS_BASE if needed
|
||
npm run dev
|
||
```
|
||
|
||
The dev server runs on `https://localhost:5173` with a self-signed
|
||
certificate. Your browser will warn about it once – accept the exception.
|
||
|
||
> The backend also uses a self-signed certificate. Open
|
||
> `https://localhost:3000/api/docs` once and accept that certificate too,
|
||
> otherwise the browser blocks the API and websocket connections.
|
||
|
||
## Build & preview
|
||
|
||
```bash
|
||
npm run build # type-checks and builds into dist/
|
||
npm run preview # serves the build on https://localhost:4173
|
||
```
|
||
|
||
## Environment variables
|
||
|
||
| Variable | Default | Description |
|
||
| --------------- | ------------------------ | ------------------------------------ |
|
||
| `VITE_API_BASE` | `https://localhost:3000` | Backend HTTP API base URL |
|
||
| `VITE_WS_BASE` | derived from API base | Backend websocket base URL |
|
||
|
||
`VITE_*` variables are inlined at build time.
|
||
|
||
## Docker
|
||
|
||
```bash
|
||
docker build \
|
||
--build-arg VITE_API_BASE=https://localhost:3000 \
|
||
-t mc-cc-frontend .
|
||
|
||
docker run -p 8443:443 mc-cc-frontend
|
||
```
|
||
|
||
The container generates a self-signed certificate on first start and serves
|
||
the SPA on port 443 (mapped to `8443` above) → `https://localhost:8443`.
|
||
|
||
## Project structure
|
||
|
||
```
|
||
src/
|
||
api/ config, shared types, HTTP client
|
||
components/ FilterBar, ItemTable, HistoryChart
|
||
composables/ useLiveData (websocket + filter state)
|
||
router/ route definitions
|
||
utils/ number / date formatting
|
||
views/ LiveView, ItemHistoryView
|
||
```
|