dtoro
b3c2c6711f
- Implemented a help system for different node types (config, render, variable, function) with detailed usage instructions. - Created a node registry to manage node types, including registration, retrieval, and validation of connections between nodes. - Defined central node and edge types for the application to streamline state management. - Added Nunjucks autocomplete functionality to enhance user experience in template editing. - Developed a syntax highlighting parser for PlantUML and Nunjucks within the CodeMirror editor. - Registered built-in node types at application startup, including their default configurations and help entries. - Introduced a theme context provider to manage light/dark mode preferences across the application. - Created utility functions for class name management using clsx and tailwind-merge. - Set up Tailwind CSS for styling with custom themes and responsive design. - Configured Vite for development with proxy settings for backend API calls and Kroki diagram service.
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.