Joshua Higgins
f9607b4628
- Add overview and prerequisites - Provide local dev and Docker run steps - Document useful npm scripts
104 lines
1.7 KiB
Markdown
104 lines
1.7 KiB
Markdown
# Connect4 Moderator Observer UI
|
|
|
|
A website interface for connecting to the [Connect4 WebSocket server](https://github.com/joshuafhiggins/connect4-moderator-server) as an observer or player, watching live matches, and managing tournaments.
|
|
|
|
## Prerequisites
|
|
|
|
- Linux/macOS terminal or Windows PowerShell
|
|
- Git
|
|
- Docker (optional, for containerized runs)
|
|
|
|
## Run Locally (Node.js + npm)
|
|
|
|
### 1) Install Node.js (includes npm)
|
|
|
|
#### Option A: Install with `nvm` (recommended, including Windows support)
|
|
|
|
On Linux/macOS:
|
|
|
|
```bash
|
|
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
|
|
source ~/.zshrc
|
|
nvm install --lts
|
|
nvm use --lts
|
|
node -v
|
|
npm -v
|
|
```
|
|
|
|
On Windows (PowerShell), use `nvm-windows`:
|
|
|
|
```powershell
|
|
winget install CoreyButler.NVMforWindows
|
|
nvm install lts
|
|
nvm use lts
|
|
node -v
|
|
npm -v
|
|
```
|
|
|
|
### 2) Install dependencies
|
|
|
|
From the project root:
|
|
|
|
```bash
|
|
npm i
|
|
```
|
|
|
|
### 3) Start the UI in development mode
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Open [http://localhost:3000](http://localhost:3000).
|
|
|
|
## Run with Docker
|
|
|
|
This repository includes:
|
|
|
|
- `Dockerfile` (multi-stage production build)
|
|
- `docker-compose.yml`
|
|
- `docker_build.sh`
|
|
|
|
### Build image directly from `Dockerfile`
|
|
|
|
```bash
|
|
docker build . -t joshuafhiggins/connect4-ui
|
|
```
|
|
|
|
or use the provided script:
|
|
|
|
```bash
|
|
./docker_build.sh
|
|
```
|
|
|
|
### Run container directly
|
|
|
|
```bash
|
|
docker run --rm -p 3000:3000 --name connect4-ui joshuafhiggins/connect4-ui
|
|
```
|
|
|
|
### Run with Docker Compose
|
|
|
|
```bash
|
|
docker compose up --build
|
|
```
|
|
|
|
Run detached:
|
|
|
|
```bash
|
|
docker compose up -d --build
|
|
```
|
|
|
|
Stop:
|
|
|
|
```bash
|
|
docker compose down
|
|
```
|
|
|
|
## Useful npm Scripts
|
|
|
|
- `npm run dev` - start Next.js dev server
|
|
- `npm run build` - build for production
|
|
- `npm run start` - run production build
|
|
- `npm run lint` - lint the project
|