Zui

Node-based editor (React Flow) for configs, variables, and rendering (PlantUML, Markdown, etc.). Optional Node.js backend API for demos or future features (e.g. todos CRUD).

Project layout

my-app/
├── frontend/           # React app (Vite, TypeScript)
│   ├── Dockerfile      # Multi-stage for prod (build → Nginx)
│   ├── Dockerfile.dev  # Dev with hot reload
│   ├── src/
│   ├── public/
│   ├── nginx.conf
│   └── package.json
├── backend/            # Node.js/Express API
│   ├── Dockerfile
│   ├── src/
│   │   └── index.js
│   └── package.json
├── docker-compose.yml
├── .dockerignore
└── .gitignore

Ignored by git: node_modules, dist, .env, .env.* (see .gitignore). Local Docker overrides: docker-compose.override.yml (optional, not committed).

---

Run locally (dev)

Frontend only:

cd frontend && npm install && npm run dev
# → http://localhost:3000

Frontend + backend (so the app can show “Backend API: N todos”):

# Terminal 1 – backend
cd backend && npm install && npm run dev
# → http://localhost:8080

# Terminal 2 – frontend
cd frontend && npm install && npm run dev
# → http://localhost:3000 (Vite proxies /api/todos to backend)

---

Run with Docker

docker compose up --build

• Frontend: http://localhost:3000 (Nginx; /api/* proxied to backend).
• Backend: http://localhost:8080 (Express).

Environment variables (backend service):

Variable	Default	Description
PORT	8080	Backend listen port.
CORS_ORIGIN	http://localhost:3000	Allowed origin for CORS.

For self-hosting (e.g. Tailscale/HTTPS): set CORS_ORIGIN to your frontend URL; put Caddy or Nginx in front for TLS if needed.

Dev with Docker (frontend hot reload): use frontend/Dockerfile.dev and mount ./frontend as a volume, or run cd frontend && npm run dev locally.

---

Scripts

Command	Description
cd frontend && npm run dev	Vite dev server.
cd frontend && npm run build	Build frontend for production.
cd frontend && npm run preview	Preview production build.
cd backend && npm run dev	Backend with --watch.
cd backend && npm start	Backend production run.
docker compose up --build	Run frontend + backend in Docker.

---

Backend API (no DB)

Method	Path	Description
GET	/api/todos	List all todos.
GET	/api/todos/:id	Get one todo.
POST	/api/todos	Create ({ "title": "...", "completed": false }).
PUT	/api/todos/:id	Update.
DELETE	/api/todos/:id	Delete.
GET	/health	Health check (e.g. for Docker).

Data is in-memory (resets on restart). Add a JSON file or DB later if needed.