docs: expand README quick start with full dev/debug setup

- Step-by-step backend setup: venv, secret key generation (openssl + Fernet), .env configuration with annotated minimum values - VS Code launch.json snippets for backend (debugpy/uvicorn) and frontend (Chrome with source maps) - Vite proxy detail (/api → :8000, /ws → ws://:8000) - Backend pytest commands alongside existing frontend test section - Playwright headed/UI mode instructions for E2E debugging - Updated unit test count to 173; removed stale E2E count - CLAUDE.md quick start trimmed to point at README for full setup
2026-04-20 10:53:14 +07:00
parent 64b35a7aaf
commit fa95587567
2 changed files with 122 additions and 48 deletions
--- a/README.md
+++ b/README.md
@@ -19,25 +19,78 @@ A multi-game server management platform with a Python/FastAPI backend and React/
 - **TanStack Query v5** — server state management
 - **Zustand 5** — client state (auth, UI)
 - **Tailwind CSS** — dark neumorphic design system
- **Playwright** — E2E testing (38 tests)
- **Vitest** + **React Testing Library** — unit tests (167 tests)
+- **Playwright** — E2E testing
+- **Vitest** + **React Testing Library** — unit tests (173 tests)

 ## Quick Start

-### Backend
+### 1 — Backend setup

 ```bash
 cd backend
+
+# Create and activate a virtual environment
 python -m venv venv
-source venv/bin/activate  # Windows: venv\Scripts\activate
+source venv/bin/activate        # macOS / Linux
+# venv\Scripts\activate         # Windows (cmd)
+# venv\Scripts\Activate.ps1     # Windows (PowerShell)
+
 pip install -r requirements.txt
-cp .env.example .env       # Edit with your settings
-uvicorn main:app --reload
 ```

-First run prints a generated admin password. Change it immediately via `PUT /api/auth/password`.
+**Generate required secrets** (one-time):

-### Frontend
+```bash
+# Secret key (JWT signing)
+openssl rand -hex 32
+
+# Fernet encryption key (sensitive config fields at rest)
+python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
+```
+
+Copy `.env.example` to `.env` and fill in the two keys:
+
+```bash
+cp .env.example .env   # then open .env in your editor
+```
+
+```ini
+# .env — minimum required values
+LANGUARD_SECRET_KEY=<output of openssl command>
+LANGUARD_ENCRYPTION_KEY=<output of Fernet command>
+LANGUARD_ARMA3_DEFAULT_EXE=C:/path/to/arma3server_x64.exe
+```
+
+**Start the backend** (development — auto-reload on file changes):
+
+```bash
+uvicorn main:app --host 0.0.0.0 --port 8000 --reload
+```
+
+First run prints a randomly-generated admin password to the console. Log in and change it immediately via Settings → Change Password (or `PUT /api/auth/password`).
+
+- API root: `http://localhost:8000`
+- Interactive docs: `http://localhost:8000/docs`
+
+**Debug in VS Code:** add this `launch.json` configuration:
+
+```json
+{
+  "name": "Backend — uvicorn",
+  "type": "debugpy",
+  "request": "launch",
+  "module": "uvicorn",
+  "args": ["main:app", "--host", "0.0.0.0", "--port", "8000"],
+  "cwd": "${workspaceFolder}/backend",
+  "env": { "PYTHONDONTWRITEBYTECODE": "1" },
+  "jinja": true,
+  "justMyCode": false
+}
+```
+
+---
+
+### 2 — Frontend setup

 ```bash
 cd frontend
@@ -45,28 +98,64 @@ npm install
 npm run dev
 ```

-Opens at `http://localhost:5173`. The dev server proxies `/api` to the backend on port 8000.
+The Vite dev server starts at `http://localhost:5173` and automatically proxies:
+- `/api/*` → `http://localhost:8000` (REST)
+- `/ws/*` → `ws://localhost:8000` (WebSocket)
+
+**Debug in VS Code:** install the [JavaScript Debugger](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug) extension (bundled by default), then add:
+
+```json
+{
+  "name": "Frontend — Vite (Chrome)",
+  "type": "chrome",
+  "request": "launch",
+  "url": "http://localhost:5173",
+  "webRoot": "${workspaceFolder}/frontend/src",
+  "sourceMapPathOverrides": {
+    "/@fs/*": "${workspaceFolder}/frontend/*"
+  }
+}
+```
+
+Start the Vite dev server first (`npm run dev`), then launch this config to attach Chrome DevTools with source-map support.
+
+---

 ## Running Tests

-### Frontend Unit Tests
+### Backend
+
+```bash
+cd backend
+source venv/bin/activate   # (if not already active)
+
+pytest                             # all tests
+pytest tests/adapters/arma3/ -v   # adapter tests only
+pytest --tb=short -q               # quiet output
+```
+
+### Frontend unit tests

 ```bash
 cd frontend
-npm test                  # Watch mode
-npx vitest run            # Single run
-npx vitest run --coverage # With coverage
+npm test                          # single run (CI-friendly)
+npm run test:watch                # watch mode during development
+npx vitest run --coverage         # with coverage report
 ```

-### Frontend E2E Tests
+### Frontend E2E tests (Playwright)
+
+Start the backend and the Vite dev server first, then:

 ```bash
 cd frontend
-# Start backend + frontend dev server first
-npx playwright test                    # All tests (mocked + integration)
-npx playwright tests-e2e/integration/   # Full-stack integration tests only
+npm run test:e2e              # all E2E tests (headless)
+npm run test:e2e:ui           # Playwright UI mode (interactive, great for debugging)
+npx playwright test --headed  # watch tests run in an actual browser
 ```

+Integration tests (require a live backend) live in `tests-e2e/integration/`. All other tests use API mocks and run without a backend.
+
 ## Project Structure

 ```
@@ -101,7 +190,7 @@ languard-servers-manager/
 │   │   ├── hooks/               # useServers, useServerDetail, useAuth, useGames, useWebSocket
 │   │   ├── store/               # auth.store, ui.store (Zustand)
 │   │   ├── lib/                 # api.ts (Axios client)
-│   │   └── __tests__/          # Vitest unit tests (~120 tests)
+│   │   └── __tests__/          # Vitest unit tests (173 tests)
 │   ├── tests-e2e/               # Playwright E2E tests
 │   └── playwright.config.ts
 ├── API.md                       # REST + WebSocket API reference